如何为D3.js树状图的每个节点设置不同颜色？

嘿，这问题其实很好解决——你只需要在树状图的每个节点数据里直接添加一个color属性，然后在D3的渲染逻辑里绑定这个颜色值就行。我帮你修改了你的treeData，给每个节点都加了自定义颜色，同时也会告诉你怎么在代码里用上这些颜色。

1. 修改树状图数据，添加颜色属性 #

直接在每个节点的对象中新增color字段，值可以是十六进制颜色码、RGB值或者CSS颜色名称。下面是修改后的完整数据：

const treeData = {
  "name": "HTTP-GET",
  "color": "#2ecc71", // 根节点用绿色
  "children": [
    {
      "name": " wah.comsats.edu.pk/ ",
      "color": "#3498db", // 二级节点用蓝色
      "children": [
        {
          "name": " wah.comsats.edu.pk/AboutCIIT/Introduction.aspx",
          "color": "#f39c12", // 三级节点用橙色
          "children": [
            {
              "name": " wah.comsats.edu.pk/AboutCIIT/Introduction.aspx ",
              "color": "#e74c3c" // 四级节点用红色
            },
            {
              "name": " wah.comsats.edu.pk/AboutCIIT/...",
              "color": "#9b59b6" // 另一个四级节点用紫色
            }
          ]
        }
      ]
    }
  ]
};

2. 在D3代码中使用自定义颜色 #

当你绘制节点（比如用circle或rect元素）时，把fill属性绑定到节点数据里的color字段即可。举个简单的实现示例：

// 生成树布局和节点数据
const treeLayout = d3.tree().size([width, height]);
const root = d3.hierarchy(treeData);
treeLayout(root);
const nodes = root.descendants();

// 绘制节点圆圈
svg.selectAll('circle.node')
  .data(nodes)
  .enter()
  .append('circle')
  .attr('r', 10)
  .attr('cx', d => d.x)
  .attr('cy', d => d.y)
  .style('fill', d => d.data.color); // 这里直接调用我们添加的color属性

如果你的节点用的是矩形或其他形状，只需要把style('fill', ...)替换成对应的填充属性就行，逻辑完全一致。

可选：自动分配颜色（无需手动修改数据） #

要是你不想手动给每个节点加颜色，也可以用D3的颜色比例尺自动生成。比如用分类色板给不同层级或不同名称的节点分配颜色：

// 创建分类颜色比例尺
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

// 绘制节点时根据节点层级分配颜色
svg.selectAll('circle.node')
  .data(nodes)
  .enter()
  .append('circle')
  .attr('r', 10)
  .attr('cx', d => d.x)
  .attr('cy', d => d.y)
  .style('fill', d => colorScale(d.depth)); // 根据节点深度分配颜色

不过既然你问的是修改数据来实现，第一种手动添加color属性的方法最直接也最灵活，完全可以按照你的需求自定义每个节点的颜色。

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