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

Posted

技术标签:

【中文标题】如何知道 D3.js 中的当前缩放级别【英文标题】:how to know the current Zoom level in D3.js 【发布时间】:2013-02-15 07:53:21 【问题描述】:

这几天我遇到了一个问题。我有一个图表,当我使用 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/

【问题讨论】:

【参考方案1】:

在绘图函数中,当前事件将具有缩放级别(您提到的 d3.event.scale)。此外,如果您保持这种行为:

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

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

zm.scale();

【讨论】:

好的,它的工作原理 console.log(zm.scale(), zm.translate()); 但只在绘图函数中() 只要您可以访问范围或闭包中的 zm 变量,它应该可以在任何地方工作。见here【参考方案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

【讨论】:

【参考方案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

【讨论】:

【参考方案4】:

截至今天(d3.v5),检查闭包内缩放级别的方法是查看此属性:

d3.event.transform.k

【讨论】:

以上是关于如何知道 D3.js 中的当前缩放级别的主要内容,如果未能解决你的问题,请参考以下文章

D3.js 设置初始缩放级别

d3js中的缩放线

Javascript / D3.js - 绘制大型数据集 - 提高 d3.js 绘制的 svg 图表中的缩放和平移速度

Android:如何将地图视图的缩放级别设置为当前位置周围 1 公里半径?

在 D3.js 中缩放或平移时限制域

D3.js 力导向图的拖拽(drag)与缩放(zoom)