墨者修齐 2020-04-12 · G6 中的样式定义及状态管理、what is a bar chart、Where Innovation Happens、Breaking the wave、How to Lie With Maps - 《墨者修齐 · 数据可视化月刊》

G6 中的样式定义及状态管理">G6 中的样式定义及状态管理
what is a bar chart?">what is a bar chart?
Where Innovation Happens">Where Innovation Happens
Breaking the wave">Breaking the wave
THE CHARTMAKER DIRECTORY">THE CHARTMAKER DIRECTORY
香港海洋公园陷入财政赤字">香港海洋公园陷入财政赤字
How to Lie With Maps">How to Lie With Maps

G6 中的样式定义及状态管理

在 G6 3.4 版本中，我们调整和优化了状态管理，将 G6 的状态管理分为以下几层：

定义状态：统一的定义方式；
设置状态：setItemState 方法；
更新状态：updateItem 支持更新状态；
取消状态：clearItemStates 方法。

单独从状态管理这块来看，是比较清晰了，实际使用中用户一般会按如下操作：

const graph = new G6.Graph({
    container: 'container',
  width: 500,
  height: 500,
  defaultNode: {
      shape: 'circle',
    style: {
        // keyshape 的样式
       fill: 'blue'
    },
    labelCfg: {
        // 节点上 label 的样式
      style: {
      }
    }
  },
  nodeStateStyles: {
      selected: {
        // 这里如果不使用 shape 的name 属性，则默认为是keyShape的状态样式
      fill: 'red',
      'text-shape': {
          // 这里定义的是 name 属性为 text-shape 的元素的状态样式，默认的 label name 属性为 text-shape
      }
    }
  }
})

当用户实际使用的时，就会有一个坑，定义默认样式时可以使用 labelCfg 设置 label 样式，那在定义状态样式就会很自然地使用 labelCfg，结果发现不起作用，会给很多用户造成困扰。labelCfg 这种形式算是历史遗留问题，从最开始就这样使用的，当 states 只支持 keyShape 时并没有问题，states 支持子元素后就会出现这个困扰。

计划中，暂未实现我们计划接下来对定义元素默认样式也调整一下，统一使用元素的 name 属性，调整以后，使用方式就像下面这种：

const graph = new G6.Graph({
    // ...
  defaultNode: {
      shape: 'circle',
    style: {
        // keyshape 的样式
      fill: 'blue',
      'text-shape': {
          // 节点上 label 的样式，text-shape 为 label 的 name 属性值
      }
    },
  },
  nodeStateStyles: {
      selected: {
        // 这里如果不使用 shape 的name 属性，则默认为是keyShape的状态样式
      fill: 'red',
      'text-shape': {
          // 这里定义的是 name 属性为 text-shape 的元素的状态样式，默认的 label name 属性为 text-shape
      }
    }
  }
})