d3.js - 如何在 D3 中指定初始缩放级别？

Question

我编写了一个脚本来以图形方式显示一些面向行的数据，包括行之间的条形、标签和连接。随着数据集的增长，生成的 SVG 元素已经超过了屏幕的大小。为了将结果保留在一个屏幕上(部分是为了使用户更容易管理 d3 缩放行为)，我在绘制之前缩放了 SVG 元素，使其适合屏幕。我通过向 SVG 元素附加一个转换/缩放属性来做到这一点。

问题是，d3 的行为.zoom 不知道比例的这种变化，所以当我开始缩放时，它首先将比例重置为 1。有没有办法改变 d3 的行为.zoom 中的初始比例？

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

通过将 d3.event.scale 乘以 redraw() 函数中的初始比例来解决这个问题。所以，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 + ")");
};

Answer 1

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

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