antvis/G2

Config data-driven style #4175

pearmini posted onGitHub

配置数据驱动的样式

可视化框架的核心之一就是图元的样式和数据是相关的。数据相关的样式属性是通道,在之前的设计中通道都是在 encode 里面声明,style 就是和数据无关的属性。

存在问题

当时这么设计的原因是希望用户的心智更加简单:和数据相关的就在 encode 里面声明,否者就在 style 里面声明。但是这样其实存在一些问题:

  • 除了特定的通道:x,y,color,size,opacity 之外,大部分通道不需要创建比例尺,也没有相应的辅助元素。而比例尺的创建是比较重的:需要把对应的数据列提取出来,还需要映射数据。
  • encode 过于灵活,不收敛。

API 设计

新的设计就是 style 支持回掉,至于心智的问题加以引导就好:特定通道通过 encode 配置,非特定通道通过 style 配置

const config = {
  style: {
    lineWidth: (d) => (d.value > 10 ? 10 : 1),
  },
};

Fund this Issue

$0.00
Funded

Pull requests