我该如何在D3中指定初始缩放级别？

Question

我写了一个脚本，用于以柱状图、标签和行之间的连接形式显示一些面向行的数据。随着数据集的增长，生成的SVG元素已经超出了屏幕的大小。为了使结果仅占用一个屏幕（主要是为了使d3缩放行为更容易管理），我在绘制之前缩放了SVG元素，使其适合于屏幕大小。我通过向SVG元素附加transform/scale属性来实现这一点。

问题在于，d3的behavior.zoom不知道这个缩放的变化，因此当我开始缩放时，它首先将缩放重置为1。有没有办法在d3的behavior.zoom中更改初始缩放比例？

编辑：添加了一个解决方法

在redraw()函数中，通过将d3.event.scale乘以初始缩放比例来解决了这个问题。因此，SVG元素的初始声明为：

var SVG = d3.select('#timeline')
    .append('svg:svg')
        .attr('class','chart')
        .attr('transform','scale('+bscale+')')
        .attr('width', wwidth)
        .attr('height', wheight)
        .call(d3.behavior.zoom()
            .extent([[0,Infinity],[0,Infinity],[0,Infinity]])
            .on('zoom', redraw));

并且

function redraw() {
    SVG.attr("transform",
        "translate(" + d3.event.translate + ")"
        + "scale(" + d3.event.scale * bscale + ")");
};

- Jerry Neumann

Answer 1

从D3 2.8.0开始，新的d3.behavior.zoom允许您设置当前缩放比例，例如：

d3.behavior.zoom()
    .scale(currentScale);

- Jason Davies

---

不幸的是，d3 API [https://github.com/mbostock/d3/wiki/API-Reference] 没有这个页面。是否有在线示例展示 zoom() 的使用？ - August

“currentScale”应该是多少？ - vsync

Answer 2

在d3 v4版本中，您可以使用以下代码：

svg.call(zoom.transform, d3.zoomIdentity.scale(X_SCALE,Y_SCALE));

下面是一个简单的示例：

var zoom = d3.zoom()
        .on("zoom", zoomed);

var zoomer = svg.append("rect")
        .call(zoom)
        .call(zoom.transform, d3.zoomIdentity.scale(2,2));

function zoomed() {
        svg.attr("transform", d3.event.transform);
    }

希望这能有所帮助。

- makeasy

Answer 3

设置缩放值后，您必须调用缩放事件才能使更改显示在屏幕上。这是如何做到的：

//set the min and max extent to which zooming can occur and define a mouse zoom function
var zoom = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", zoomed);
zoom.translate([50,50]).scale(2);//translate and scale to whatever value you wish
zoom.event(yourSVGlayer.transition().duration(50));//does a zoom
//this function handles the zoom behaviour when you zoom with the mouse
function zoomed() { yourSVGlayer.attr("transform", "translate("+d3.event.translate+")scale(" + d3.event.scale + ")"); }

- Nav