D3 v4 - 獲取當前縮放比例？

Question

在D3.js的第4版中，如何獲得縮放比例的當前級別？

我想要這樣的東西：

var currentScale = zoom.scale();

Answer 1

您可以使用兩種方法。

一種是使用d3.zoomTransform(element).k ，請參閱此處的API文檔 。 元素是選擇的節點而不是d3選擇本身。

另一種是設置變量以跟蹤縮放比例並在每個縮放事件上使用k = d3.event.transform.k;更新它k = d3.event.transform.k; 。 初始值通常為1。

兩者都用於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>