放大镜在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; });

对于不同大小的元素，它可以正常工作。