悬停时增加节点半径

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 循环才能完成：

在鼠标悬停函数中执行此操作：

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

悬停时增加节点半径

on hover increase node radius

javascript

d3.js

mouseover

force-layout