如何知道D3.js当前缩放级别(how to know the current Zoom level

2019-07-20 18:30发布

我有一个问题,因为几天。 我有一个曲线图,当我使用缩放行为它的工作原理,但我需要知道我什么时候达到最大变焦给予加载新

// Specifies the zoom scale's allowed range, [min, max]
d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", draw)

见我的代码http://jsfiddle.net/albanlopez/D4MRP/

Answer 1:

在绘制函数当前事件将具有缩放级别(d3.event.scale正如你所提到)。 此外,如果你保持行为周围像:

var zm = d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", draw);

然后,你可以找到通过调用当前缩放级别:

zm.scale();


Answer 2:

作为D3 V4的有检索缩放状态两种记录方式。 引用D3 / D3变焦README(下放大变换):

要检索的缩放状态,缩放事件监听器内的当前缩放事件中使用event.transform(见zoom.on),或使用d3.zoomTransform给定节点。

https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms



Answer 3:

rect.call(zm=d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", draw));

一个新的测试后,我找到了答案:

var currentZoom = d3.event.scale;

但只提供/读取通过。对所谓的draw()函数(“缩放”,画)

rect.call( zm = d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", draw));

function draw() {
    // trace l'axe X
    svg.select("g.x.axis").call(xAxis);
    // trace l'axe Y
    svg.select("g.y.axis").call(yAxis);
    // trace la courbe
    svg.select("path.line").attr("d", line);

    console.log(zm.scale(), zm.translate()); // , zm.translate[1] = Y
    console.log(d3.event.scale, d3.event.translate[0]); // , d3.event.translate[1] = Y
}


文章来源: how to know the current Zoom level in D3.js