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

我制作了一个层次化的边缘绑定图，类似于Mike Bostock提供的示例（我在JSFIDLE上链接了这个示例）。问题是，我的图形要大得多，这使得它无法在没有大量节点相互重叠的情况下完全显示在查看窗口中，因为节点太多（大约1500个）。我将实际的圆放大，这样就没有节点重叠，但这意味着您只能查看图形的一部分，必须滚动才能查看其余部分

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

这是鱼眼镜头示例的代码，但添加到边缘捆绑图时没有效果。您可以在此处看到所需的效果：

我必须改变什么才能在我的图表上实现这种效果

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

这是我想在其上实现鱼眼效果的分层绑定图的示例