AngularJS项目中D3.js折叠树如何按数据设置不同链接颜色？

你之前的问题出在给整个链接组（gLink）设置stroke属性——这个组里的所有路径元素会继承同一个颜色，且getLinkColor()只在组创建时执行一次，导致所有链接颜色完全一致。要实现每个链接不同颜色，必须给每个单独的路径元素设置stroke，而非父容器。

正确实现步骤： #

1. 保留gLink组的基础样式，但移除全局stroke设置：

const gLink = svg.append("g")
  .attr("fill", "none")
  .attr("stroke-opacity", 0.4)
  .attr("stroke-width", 1.5);

2. 在update函数的链接数据处理阶段，为每个路径元素单独设置stroke：

function update(event, source) {
  const duration = event?.altKey ? 2500 : 250;

  // 生成链接数据
  const links = tree.links(root.descendants().slice(1));

  // 绑定链接数据到路径元素
  const link = gLink.selectAll("path")
    .data(links, d => d.target.id);

  // 新增链接：单独设置颜色和初始路径
  const linkEnter = link.enter().append("path")
    .attr("d", d => {
      const o = {x: source.x0, y: source.y0};
      return diagonal({source: o, target: o});
    })
    .attr("stroke", d => getLinkColor(d)); // 给每个新链接分配颜色

  // 更新现有链接：同步更新颜色和路径
  const linkUpdate = link.merge(linkEnter)
    .transition()
    .duration(duration)
    .attr("d", diagonal)
    .attr("stroke", d => getLinkColor(d)); // 动态更新颜色

  // 移除旧链接
  link.exit().transition()
    .duration(duration)
    .attr("d", d => {
      const o = {x: source.x, y: source.y};
      return diagonal({source: o, target: o});
    })
    .remove();

  // ... 其余原有节点处理逻辑
}

3. 调整getLinkColor函数，可根据链接数据返回对应颜色（替换成你的业务逻辑即可）：

function getLinkColor(linkData) {
  // 示例1：根据目标节点属性设置颜色
  // return linkData.target.category === 'important' ? '#ff0000' : '#555';
  
  // 示例2：保留你的随机逻辑（每个链接单独计算）
  const num = Math.floor(Math.random() * 2);
  return num ? "#555" : "red";
}

核心逻辑： #

• 必须在单个路径元素上设置stroke，而非父组gLink，才能让每个链接拥有独立颜色。
• getLinkColor接收当前链接的完整数据对象d，你可以基于节点类型、层级、自定义字段等业务规则，灵活返回对应颜色。

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