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

Question

在D3.js的第4版中,如何获得缩放比例的当前级别？

我想要这样的东西:

var currentScale = zoom.scale();

Answer 1

您可以使用两种方法.

一个是使用d3.zoomTransform(element).k,请参阅此处的API文档.元素是选择的节点而不是d3选择本身.

另一种是设置变量以跟踪缩放比例并在每个缩放事件上更新它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>