D3.js节点点击变色功能失效问题求助

嗨，Rohit！你的问题其实是两个小细节没处理好导致的，咱们一步步拆解解决：

问题1：D3 v3的事件回调参数逻辑错误 #

你用的是D3 v3版本，这个版本的事件处理函数参数规则和后续v4/v5不一样：

• 在v3中，点击事件的回调函数第一个参数是数据对象d，第二个是索引i，事件对象需要通过d3.event来获取，不是通过参数传入的。
• 你当前写的clicked(event, d)在v3里根本拿不到正确的event对象，if (event.defaultPrevented) return;这行不仅起不到判断拖拽的作用，甚至可能因为event未定义报错。

问题2：CSS样式优先级覆盖了元素属性 #

你的CSS里给.node类设置了fill: blue，而你在点击事件里用.attr("fill", "black")设置的是SVG元素的fill属性。在CSS优先级规则里，类选择器的样式优先级高于元素本身的属性，所以即使你设置了fill属性，也会被CSS样式覆盖，颜色自然不会变化。

解决方案 #

把这两个问题修正后，功能就能正常工作了：

1. 修正事件回调的参数与事件对象获取

把clicked函数改成这样：

function clicked(d) {
  // 用d3.event替代原来的event参数
  if (d3.event.defaultPrevented) return; // 判断是否为拖拽事件

  d3.select(this)
    .transition()
    // 用.style()设置内联样式，优先级高于CSS类
    .style("fill", "black")
    .attr("r", width * 0.2)
    .transition()
    .attr("r", width*0.03)
    // 如果需要点击后恢复蓝色，可在此添加.style("fill", "blue")
}

2. 用.style()替代.attr()设置填充色

如上面代码所示，用.style("fill", "black")设置颜色，因为内联样式（style属性）的优先级比CSS类高，能直接覆盖.node类的fill: blue样式。

当然你也可以换一种思路：把CSS里的fill: blue去掉，改成在创建节点时用.attr("fill", "blue")设置元素属性，这样后续用.attr("fill", "black")也能直接覆盖它，两种方法都可行。

修改后的核心代码片段 #

这里是调整后的节点创建和点击事件部分：

var node = svg.selectAll('.node')
  .data(force.nodes())
  .enter().append('circle')
  .attr('class', 'node')
  .on("click", clicked)
  .attr('r', width*0.03);

function clicked(d) {
  if (d3.event.defaultPrevented) return; // dragged

  d3.select(this).transition()
    .style("fill", "black")
    .attr("r", width * 0.2)
    .transition()
    .attr("r", width*0.03)
}

这样修改后，点击节点就能看到颜色变成黑色，同时伴随缩放动画啦！

备注：内容来源于stack exchange，提问作者Rohit Chakraborty