javascript - D3 v4 - 获取当前缩放比例？

Question

在 D3.js 版本 4 中，我如何获取缩放比例的当前级别？

我想要这样的东西:

var currentScale = zoom.scale();

Answer 1

您可以使用两种方法。

一种是使用d3.zoomTransform(element).k，参见API documentation here .该元素是选择的节点而不是 d3 选择本身。

另一种方法是设置一个变量来跟踪缩放比例，并在每次使用 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>