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);

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);
    }

希望有所帮助。

Answer 3

设置缩放值后，您必须调用缩放事件以使更改显示在屏幕上。 Here's how you do it：

//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 + ")"); }

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

3 个答案: