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

您可以通过不显式声明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中读取它们.