d3中的放大镜

Question

我在D3中定制了更像扁平包装布局的构建图表。

我想用此图表实现放大镜，以便当用户将鼠标悬停在图表上时，它会放大图表，并且圆圈看起来会更大。

我已经试过插件anythingzoomer.js

但它的问题是我的图表是在总规模更大，我想扩大其在尺寸上更小，以便原始图表的映射和克隆上圆图表不够准确。

我也使用鱼眼失真插件，但它不允许具有不同半径的圆圈。它给每个圆圈一个固定的半径。

你们有其他的选择吗？

Answer 1

https://github.com/d3/d3-plugins/tree/master/fisheye的鱼眼插件提供了一个缩放的z值，您可以使用任何您想要的方式，以便它允许具有不同半径的圆。 GitHub的自述不包括如何鱼眼镜头的规模（返回为z）与具有不同的半径值，但如果你把基本的例子节点结合一个例子：

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

很清楚的看到，你可以改变将R功能更有趣的东西：

.attr("r", function(d) { return d.fisheye.z * d.size; }); 

它会适用于不同大小的元素。