如何在D3.js中知道当前的缩放级别

Question

我有一个问题已经几天了。我有一个图表，当我使用Zoom Behavior时它可以工作，但我需要知道何时达到最大缩放级别以加载新的给定内容。

// 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/

- Alban

Answer 1

在绘制函数中，当前事件会有缩放级别（就像你提到的那样，d3.event.scale）。此外，如果您始终保持以下行为：

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

然后，您可以通过调用以下方法来查找当前的缩放级别：

zm.scale();

- Superboggly

---

好的，在绘图函数中，这段代码 console.log(zm.scale(), zm.translate()); 能够正常工作。 - Alban

只要您可以在作用域或闭包中访问zm变量，它就可以在任何地方运行。请参见此处。 - Superboggly

Answer 2

自D3 v4以来，有两种记录的方法可以检索缩放状态。引用d3 / d3-zoom README（在Zoom Transforms下）：

要检索缩放状态，请在缩放事件侦听器中使用当前缩放事件上的event.transform（请参见zoom.on），或为给定节点使用d3.zoomTransform。 https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms

- CodeOcelot

Answer 3

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

经过一次新的测试，我得到了答案：

var currentZoom = d3.event.scale;

但只有在由.on("zoom", draw)调用的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
}

- Alban

Answer 4

截至今天（d3.v5），在闭包中检查缩放级别的方法是查看此属性：

d3.event.transform.k

该属性表示当前缩放比例。

- elachell