如何根据JSON的checked属性修改D3.js鱼骨图的文本颜色

实现方案 #

你只需要修改JS文件即可，可选补充少量CSS规则，不需要改动现有HTML结构。以下是两种常用实现方式：

方式1：JS直接修改内联样式（简单快速）

你已经可以遍历节点拿到checked属性，直接通过D3的style方法给对应节点文本设置颜色即可，示例代码如下：

// 把选择器替换成你项目里实际选中节点文本的选择器，比如有的鱼骨图组件文本类是.node-text
d3.selectAll(".label")
  .each(function(nodeData) {
    // nodeData就是绑定的JSON节点数据
    if (nodeData.checked) {
      d3.select(this).style("color", "red");
    }
  })

如果是在节点初始化渲染阶段加逻辑，可以直接在文本渲染的链式调用里加判断：

.append("text")
.attr("class", "label")
.style("color", d => d.checked ? "red" : "") // 空值会沿用原有CSS定义的颜色

方式2：加自定义CSS类（更易维护）

如果后续可能修改选中态样式，推荐用加类的方式实现：

1. 先在你的样式文件里新增自定义类：

.label-checked {
  /* 加!important覆盖原有label-*类的颜色优先级 */
  color: red !important;
}

2. 在JS遍历节点时给符合条件的节点加类即可：

d3.selectAll(".label")
  .classed("label-checked", d => d.checked)

这两种方式都不需要修改HTML，因为鱼骨图的所有节点都是D3动态生成的，直接在JS层操作渲染逻辑即可。

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