D3 v4 - 現在のズームスケールを取得しますか？

Question

D3.jsのバージョン4では、ズームスケールの現在のレベルをどのように取得しますか？

var currentScale = zoom.scale(); 

Answer 1

はあなたが使用できる2つの方法があります。

は、私はこのような何かをしたいです。

d3.zoomTransform(element).kのいずれかを使用します。API documentation hereを参照してください。要素は、d3選択自体ではなく、選択のノードです。

もう1つは、変数を設定して、ズーム・スケールを追跡し、ズーム・イベントごとにk = d3.event.transform.k;で更新することです。初期値は通常1になります。

canonical zoom example from Mike Bostock： （ズームイベントとクリックイベントには倍率が表示されます）の両方で使用されます。

var canvas = d3.select("canvas"), 
 
    context = canvas.node().getContext("2d"), 
 
    width = canvas.property("width"), 
 
    height = canvas.property("height"), 
 
    radius = 2.5; 
 

 
var points = d3.range(2000).map(phyllotaxis(10)); 
 

 
canvas.call(d3.zoom() 
 
    .scaleExtent([1/2, 4]) 
 
    .on("zoom", zoomed)) 
 
    .on("click", displayScale); 
 

 
drawPoints(); 
 

 

 
var k = 1; 
 

 
function zoomed() { 
 
    context.save(); 
 
    context.clearRect(0, 0, width, height); 
 
    context.translate(d3.event.transform.x, d3.event.transform.y); 
 
    context.scale(d3.event.transform.k, d3.event.transform.k); 
 
    k = d3.event.transform.k; 
 
    drawPoints(); 
 
    context.restore(); 
 
    
 
    // Method 1: 
 
    console.log(d3.zoomTransform(canvas.node()).k); 
 
    
 
    // Method 2: 
 
    console.log(k); 
 
} 
 

 
function drawPoints() { 
 
    context.beginPath(); 
 
    points.forEach(drawPoint); 
 
    context.fill(); 
 
} 
 

 
function drawPoint(point) { 
 
    context.moveTo(point[0] + radius, point[1]); 
 
    context.arc(point[0], point[1], radius, 0, 2 * Math.PI); 
 
} 
 

 
function phyllotaxis(radius) { 
 
    var theta = Math.PI * (3 - Math.sqrt(5)); 
 
    return function(i) { 
 
    var r = radius * Math.sqrt(i), a = theta * i; 
 
    return [ 
 
     width/2 + r * Math.cos(a), 
 
     height/2 + r * Math.sin(a) 
 
    ]; 
 
    }; 
 
} 
 

 
function displayScale() { 
 
    // Method 1: 
 
    console.log(d3.zoomTransform(canvas.node()).k); 
 
    
 
    // Method 2: 
 
    console.log(k); 
 
}

<canvas width="960" height="500"></canvas> 
 
<script src="https://d3js.org/d3.v4.min.js"></script>