d3中的放大镜答案

【问题标题】：Magnifier in d3d3中的放大镜
【发布时间】：2014-09-01 09:37:13
【问题描述】：

我在 D3 中有自定义构建图表，它更像是平面包布局。

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

我试过插件anythingzoomer.js

但它的问题是我的图表总尺寸更大，我想放大它上面的小圆圈，所以原始图表和克隆图表的映射不够准确。

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

你们还有其他选择吗？

【问题讨论】：

标签： javascript svg d3.js charts

【解决方案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; });

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

【讨论】：

嗨以利亚，我已经尝试过你上面提到的方法。我尝试输入“d.r”而不是一些恒定的半径。但是这个 'd' 对象不是图表，而是鱼眼插件，因此无法在此处访问半径属性。但是如果您有任何有用的演示，请分享。
不，d 应该对应于绑定到该元素的数据，而 d.fisheye 是鱼眼插件。我将尝试整理一个简单的示例。
嗨以利亚，你是对的。我没有在 d3 的入站数据中包含半径。这就是 d 中没有半径的原因。感谢您的时间和建议。