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

在悬停时增加节点半径

1 个答案: