d3.js中如何不重绘图表修改单个柱形的填充pattern

直接修改目标柱形的fill属性即可，不需要重绘整个图表，实现成本很低。

具体实现逻辑 #

• 你渲染柱形时已经给所有柱元素加了.bar类名，可以通过D3选择器直接定位到目标柱
• 第二根柱形在选择集中的索引为1（索引从0开始计数），过滤出该元素后直接修改fill属性指向你预定义的newPattern即可
• 其余已渲染的坐标轴、其他柱形都不需要改动，性能远高于全量重绘

可直接复用的代码 #

把下面这段代码加到你现有脚本的末尾（也就是柱形渲染逻辑之后）即可：

// 给按钮绑定点击事件
d3.select("#patternBtn").on("click", function() {
  d3.selectAll(".bar")
    // 定位到第二根柱，也可以通过绑定的数据定位更稳妥：.filter(d => d.year === '2002')
    .filter(function(d, i) { return i === 1; })
    .attr("fill", "url(#newPattern)");
})

注意事项 #

你当前代码里所有<pattern>定义都放在了第二个独立的SVG节点下，建议把所有pattern的<defs>定义移到id为barchart的目标柱状图SVG内部，避免部分浏览器出现跨SVG引用pattern不生效的问题。

内容的提问来源于stack exchange，提问作者Hesper