d3交叉链接mouseOver节点

Question

我需要使用我的圆圈包来突出显示鼠标悬停时的匹配圆圈 不确定为什么风格没有应用。该功能正常运行

working fiddle

   var node = canvas.selectAll(".node")
   .data(nodes)
   .enter().append("g")
   //.attr("class", ".node")
   .attr("class", function(d) { return ".node " + d.AgtName; })
   .attr("transform", function (d) { return "translate(" + d.x + "," 
      + d.y + ")"; })
   .on("mouseover", function(d) { highlight(d.AgtName); })
   .on("mouseout", function(d) { highlight(null); });


   function highlight(agtName) {
    if (agtName == null) d3.selectAll(".node").classed("active", 
    false);
    else d3.selectAll(".node." + agtName).classed("active", true);

    console.log('agt: ' + agtName);
    }  

Answer 1

将填充颜色移动到节点而不是圆圈。将类从.node更改为节点

   var node = canvas.selectAll(".node")
    .data(nodes)
    .enter().append("g")
     //.attr("class", ".node")
    .attr("class", function(d) { return "node " + d.AgtName; })
    .attr("transform", function (d) { return "translate(" + d.x + "," 
      + d.y + ")"; })
    .attr("fill", "steelblue")
    .on("mouseover", function(d) { highlight(d.AgtName); })
    .on("mouseout", function(d) { highlight(null); });