小编Jer*_*ann的帖子

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

问题是,d3的行为.zoom不知道这种规模的变化,所以当我开始缩放时,它首先将比例重置为1.有没有办法在d3的behavior.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 + ")");
};