关于悬停增加节点半径

Question

链接到我的代码(柱塞)

我正在用D3.js的强制布局开发一个网络图，我被鼠标卡住了。当我悬停一个节点时，我希望与它相关的链接和子节点(一跳)在大小上扩展。现在，我的代码增加了悬浮节点的大小，增加了与其关联的链接，但没有增加与其关联的节点。

这就是我迄今所尝试过的，

鼠标在悬停的节点上会展开-

function mouseover(d) {
    link.style('stroke-width', function(l) {
    if (d === l.source || d === l.target)
        return 4;
    });

    d3.select(this).select("circle").transition()
    .duration(300)
    .attr("r", 12);
}

鼠标出来时，悬停的节点将回到原来的大小-

function mouseout() {
    link.style('stroke-width', 1.5);
    d3.select(this).select("circle")
    .transition()
    .duration(750)
    .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });
}

提前谢谢。

Answer 1

您需要几个for循环才能通过：

在mouseover函数中执行以下操作：

//links for which source or traget is hovered       
var filtered = link.filter(function(l){
  return (d === l.source || d === l.target);
})
filtered.style("stroke-width", 4);
//select all the data associated with the link i.e. source and target data
var selectedData = [];
filtered.each(function(f){
  selectedData.push(f.source);
  selectedData.push(f.target);
});
//select all the circles for which we have collected the data above.
var circleDOM = [];
selectedData.forEach(function(sd){
  d3.selectAll("circle")[0].forEach(function(circle){
    console.log(d3.select(circle).data()[0].name, sd.name)
    if (d3.select(circle).data()[0].name == sd.name){
      circleDOM.push(circle);//collect all the DOM Elements for which the data matches.
    }
  });
});
//do transition with all selected DOMs
d3.selectAll(circleDOM).transition()
    .duration(300)
    .attr("r", 12);

工作实例这里