antvis/G2
The issue has been closed
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),
},
};