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

Question

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

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

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

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

Answer 1

您可以通过在 SVG（无论如何都被 CSS 覆盖）中不显式声明width和来实现此目的，使用属性，然后允许 AnythingZoom 到原始图表的内容。heightviewBoxclone

演示（易碎）： 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 中绘图并使用通过设置类和绝对定位进行缩放的 jquery 插件，因此您必须在 CSS 和 in 中共享坐标（width幻数） JS。height225px

理想情况下，您只想将幻数保留在一个位置。为此，您可以仅在 CSS 中声明值，然后在创建 SVG 元素后在 JS 中读取它们。