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

看看这个。悬停放大对文本和图像效果很好，但我希望对图表也有同样的效果

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

D3

chart

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

---

我知道，这是相关的，但不完全是我想要的。

您可以通过不在SVG中明确声明

width

和

height

（无论如何都会被CSS覆盖），使用，然后允许任何缩放来克隆原始图表的内容

演示（易碎品）：

更改

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

关注点分离

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

由于您在SVG中使用D3（在这里您需要知道包布局的

width

和

height

）绘制，并且使用通过设置类和绝对位置缩放的jquery插件，因此您必须在CSS和JS中共享坐标（225px幻数）

---

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

为了澄清……D3 fisheye插件并不是您想要的，因为它会产生失真效果？正确，我只想要一个正方形。扭曲使我头晕整洁的我必须记住这个小工具。@gaitat更新了演示。@Music\u ut，你能帮我看看这个吗，问题缩放框中从来没有显示任何内容，这是plunker，非常感谢你的帮助