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

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


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

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
      }
    }
  }
})


这样的话,定义默认样式和状态样式就完全一致了,可以进一步降低用户的理解成本。这个时候大家可能也会有一个疑问,为什么定义默认样式时外层需要 style,而定义状态不需要,那是因为定义状态时最外层叫 nodeStateStyles 或 edgeStateStyles,已经包含了 style 了。


by @聚则(moyee-bzn)


what is a bar chart?

继what is a line graph之后的连载,文章分五个子系列分别对柱形图、条形图、分组、堆叠、百分比堆叠、瀑布等单独介绍:

image.png

image.png


by @翎刀(zqlu)


Where Innovation Happens

这个网站是美国国家商标局提供的专利转让查询网站,通过多种可视化的形式提供目前美国专利在各国的流转授权情况。

image.pngimage.pngKapture 2020-04-11 at 10.24.19.gif


by @镜曦(jingxi.lp)


Breaking the wave

屏幕快照 2020-04-11 下午1.01.45.png 屏幕快照 2020-04-11 下午1.01.35.png


路透社移动端可视化作品,对 COVID-19 死亡率曲线进行了细粒度可视分析解读。从可视化角度来说,一根简单的折线,辅以细腻的动画和信息解读组件,能够兼具惊人的信息承载和令人惊叹的视觉效果,实在是一件佳作。


by 米法


THE CHARTMAKER DIRECTORY

用可视化的方式对可视化工具能做哪些可视化类型做了整理。


Screen Shot 2020-04-11 at 5.05.29 PM.png


by @步茗Neo(neowang)


香港海洋公园陷入财政赤字

来自南华早报的这篇文章主要对比了海洋公园与多个主题公园的历年游客数量

方圆 70km 内的主题公园

image.png


附近公园的客流量。2014 年珠海的长隆海洋王国成立,该公园客流量逐年增长迅速,而从此香港海洋公园的客流量便开始下降。

image.png


2017 年,中、美、其他国家几大主题公园的客流量对比:

上海迪士尼乐园客流量较高,而香港海洋公园排在最后。

image.png


by @十吾(shiwu-5wap2)



How to Lie With Maps

在地图上应用墨卡托投影会造成拉伸(格陵兰岛几乎和南美洲一样大)。image.png


另外,对于同样的数据选择不同的可视化呈现方式也能从某种意义上欺骗读者。例如如果以区域为单位展示红蓝两党支持度,川普似乎获得了大胜。但如果换成散点图(右图)呈现,优势就没这么明显了。image.png


by @沧东(cangdong)