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：（比例因子显示在缩放事件和点击事件上）。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

1 个答案: