d3交叉鼠标交换节点

Question

我需要我的圆形包来突出显示鼠标悬停上的匹配圆。
不知道为什么风格没有被应用。该功能被点击OK

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); });