如何实现D3图表的放大方块效果？

Question

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

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

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

我知道D3鱼眼插头,这是相关的,但不是我想要的.

Answer 1

您可以通过不显式声明width并height在SVG(无论如何被CSS覆盖),使用viewBox属性,然后允许AnythingZoom到clone原始图表的内容来实现.

演示(脆弱): 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插件,它通过设置类和绝对定位缩放,您必须共享坐标(225px在CSS和幻数) JS.

理想情况下,您可能希望将幻数保持在一个位置.为此,您只能在CSS中声明值,然后在创建SVG元素后在JS中读取它们.