javascript - 悬停时增加节点半径

Question

Link to my code (Plunker)

我正在 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 循环才能完成此任务:

在鼠标悬停函数内执行以下操作:

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

工作示例here