如何在d3.js中为JSON数据指定特定颜色及层级边图悬停配色

嘿，我来帮你搞定这个需求！基于mbostock的层级边图示例，要改成鼠标悬停链接时通过JS给JSON节点指定特定颜色，咱们一步步来：

1. 先调整CSS，避免自动着色冲突 #

原示例里是用CSS的:nth-child规则自动给节点上色的，咱们先把这部分CSS注释或者删掉，让JS全权控制颜色：

/* 注释掉原有的自动着色规则，比如：
.node:nth-child(4n+1) { fill: #8000ff; }
.node:nth-child(4n+2) { fill: #00ff80; }
...
*/

2. 定义节点颜色映射，设置初始颜色 #

先根据你JSON里的节点信息（比如name或type）定义一个颜色映射对象，然后在创建节点的时候给它们设置初始填充色：

// 根据你的JSON节点name定义颜色映射，对应你要的特定颜色
const nodeColorMap = {
  "brand1": "#8000ff",
  "brand2": "#ff0080",
  "activity1": "#0080ff",
  // 其他节点的颜色按需添加
};

// 在创建节点circle元素时应用初始颜色
node.append("circle")
    .attr("r", d => Math.sqrt(d.size) / 10 || 4.5)
    .style("fill", d => nodeColorMap[d.name] || "#ccc"); // 没有匹配的节点用灰色兜底

如果你的颜色是按type区分的，把映射对象改成按type键值对就行，比如{1: "#8000ff", 2: "#ff0080"}，然后style("fill", d => nodeColorMap[d.type] || "#ccc")。

3. 实现鼠标悬停链接的颜色切换逻辑 #

给链接元素添加mouseover和mouseout事件，找到链接对应的源节点和目标节点，然后切换它们的颜色，鼠标移出时恢复初始状态：

// 给所有链接绑定悬停事件
link.on("mouseover", (event, linkData) => {
  // 获取当前链接的源节点和目标节点
  const source = linkData.source;
  const target = linkData.target;

  // 高亮这两个节点，这里用金色作为高亮色，你可以换成想要的颜色
  d3.selectAll(".node circle")
    .filter(nodeData => nodeData === source || nodeData === target)
    .style("fill", "#ffd700");

  // 可选：同时高亮关联的链接
  link.style("stroke", l => 
    l.source === source || l.target === target || l.source === target || l.target === source 
      ? "#ffd700" 
      : "#999"
  );
})
.on("mouseout", () => {
  // 恢复所有节点的初始颜色
  d3.selectAll(".node circle")
    .style("fill", d => nodeColorMap[d.name] || "#ccc");

  // 恢复所有链接的初始颜色
  link.style("stroke", "#999");
});

额外提示 #

• 如果你需要更复杂的配色逻辑（比如悬停时显示节点本身的特定高亮色，而不是统一的金色），可以在颜色映射里再加一套高亮色，比如nodeHighlightMap，然后在mouseover时用这个映射的颜色。
• 确保节点选择器.node circle和你的DOM结构匹配，原示例里节点是用<g class="node">包裹<circle>和<text>的，所以这个选择器是有效的。

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