d3.js -根据子节点d.data.type将链接颜色更改为子节点

<script src="https://d3js.org/d3.v7.min.js"></script>

<svg id="chart"></svg>

const data = {
  nodes: [
    { id: 1, type: "A" },
    { id: 2, type: "B" },
    { id: 3, type: "A" },
    { id: 4, type: "C" },
  ],
  links: [
    { source: 1, target: 2 },
    { source: 1, target: 3 },
    { source: 2, target: 4 },
  ],
};

// 创建一个力导向图布局
const simulation = d3.forceSimulation(data.nodes)
  .force("link", d3.forceLink(data.links).id((d) => d.id))
  .force("charge", d3.forceManyBody().strength(-100))
  .force("center", d3.forceCenter(width / 2, height / 2));

// 创建链接元素
const links = svg.selectAll("line")
  .data(data.links)
  .enter()
  .append("line")
  .style("stroke", (d) => {
    // 根据子节点的类型来更改链接的颜色
    const sourceType = d.source.type;
    const targetType = d.target.type;
    
    // 在这里根据子节点的类型来选择颜色
    if (sourceType === "A" && targetType === "B") {
      return "red";
    } else if (sourceType === "A" && targetType === "C") {
      return "blue";
    } else {
      return "gray";
    }
  });

// 更新力导向图布局
simulation.on("tick", () => {
  links
    .attr("x1", (d) => d.source.x)
    .attr("y1", (d) => d.source.y)
    .attr("x2", (d) => d.target.x)
    .attr("y2", (d) => d.target.y);
});