web-dev-qa-db-ja.com

D3.jsで現在のズームレベルを知る方法

数日から問題があります。グラフがあり、使用すると ズーム動作 動作しますが、最大ズームに達して新しいものをロードするタイミングを知る必要があります

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

javascripteventsgraphd3.jszoom
13
Alban
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
}
8
Alban

描画機能では、現在のイベントにズームレベル（前述のようにd3.event.scale）があります。また、次のような動作を維持する場合：

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

次に、次のコマンドを呼び出して、現在のズームレベルを確認できます。

zm.scale();
16
Superboggly

D3 v4の時点で、ズーム状態を取得する2つの文書化された方法があります。 d3/d3-zoom README（Zoom Transformsの下）を引用するには：

ズーム状態を取得するには、ズームイベントリスナー内の現在のズームイベントでevent.transformを使用するか（zoom.onを参照）、特定のノードに対してd3.zoomTransformを使用します。

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

11
CodeOcelot