d3.js - 如何实现D3图表的放大方 block 效果？

Question

看看这个jsfiddle .悬停时放大适用于文本和图像，但我希望对图表具有相同的效果。

如果可能的话，我希望解决方案适用于任何基于 D3 SVG 的图表。

该示例使用 jquery 插件 AnythingZoomer，在我看来这是一个很好的起点，但是，您不需要坚持使用它，如果您愿意，可以使用其他任何东西。

我知道 D3 fisheye pluging ，这是相关的，但不是我想要的。

Answer 1

您可以通过不在 SVG 中显式声明 width 和 height(无论如何都会被 CSS 覆盖)来做到这一点，使用 viewBox attribute ，然后允许 AnythingZoom 克隆原始图表的内容。

演示(易碎): http://jsfiddle.net/H9psX/ http://jsfiddle.net/H9psX/38/

变化

var svg = d3.select("#small-chart").append("svg")
//    .attr("width", diameter + 300)
//    .attr("height", diameter)
    .attr('viewBox', "0 0 " + 225 + " " + 225);

// ...

$("#zoom3").anythingZoomer({
    clone: true
});

关注点分离

由于您使用 D3 在 SVG 中绘图(您需要知道包布局的 width 和 height)并使用通过设置类缩放的 jquery 插件和绝对定位，您必须在 CSS 和 JS 中共享坐标(225px 魔数(Magic Number))。

理想情况下，您希望只将魔数(Magic Number)保留在一个地方。为此，您可以仅在 CSS 中声明值，然后在创建 SVG 元素后在 JS 中读取它们。