Question

我制作了一个分层边缘捆绑图，类似于Mike Bostock提供的示例（我已经链接到jsfiddle）。问题是我的图形明显更大，这使得它无法在观察窗口中完全显示而没有多个节点相互重叠，因为只有很多（大约1500个）。我将实际圆圈做得更大，以便没有节点重叠，但这意味着您只能查看图形的一部分，并且必须滚动查看其余部分。

最终我尝试从放大的圆圈中缩小，使其在页面上完全可见，但是节点的名称显然太小而无法辨别。因此，我想要做的是在图形上实现鱼眼镜头效果，这样只要用户将鼠标悬停在节点上，它就会对小文本产生放大效果，因此可以在“放大镜”下阅读文本。

这是鱼眼镜头示例的代码，但添加到边缘捆绑图时无效。您可以在此处看到所需的效果：http://bost.ocks.org/mike/fisheye/

我必须更改哪些才能在我的图表上实现此效果？

var fisheye = d3.fisheye.circular()
  .focus([360, 90])
  .radius(100);

d3.select(".container").on("mousemove", function() {
  fisheye.focus(d3.mouse(this));

 node.each(function(d) { d.fisheye = fisheye(d); })
  .attr("cx", function(d) { return d.fisheye.x; })
  .attr("cy", function(d) { return d.fisheye.y; })
  .attr("r", function(d) { return d.fisheye.z * 4.5; });

link.attr("x1", function(d) { return d.source.fisheye.x; })
  .attr("y1", function(d) { return d.source.fisheye.y; })
  .attr("x2", function(d) { return d.target.fisheye.x; })
  .attr("y2", function(d) { return d.target.fisheye.y; });
});

这是我希望实现鱼眼效果的分层捆绑图的示例。

https://jsfiddle.net/6zubznta/1/

如何将鱼眼镜头效果添加到我的分层边缘捆绑图？

0 个答案: