D3v4 可见区域缩放坐标

Question

我正在尝试计算缩放后可见区域的坐标。有没有办法使用 d3.event.transform?

来计算它

我尝试了很多但没能成功，至少对于 d3v4 是这样。使用 v3 不是意见，因为项目的其他所有内容都使用 v4。

Answer 1

您需要做的就是从变换中获取 inverse 个点，

var width = 800,
  height = 400,
  Radius = 20;

var Circles, Data = [];

for (var i = 0; i < 3; i++) {
  Data.push({
    x: 100 + i * Radius * 8,
    y: 100,
  });
}

var zoom = d3.zoom().scaleExtent([1, 128]).on("zoom", zoomed);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(zoom);

svg.append("rect")
  .attr("class", "overlay")
  .attr("width", width)
  .attr("height", height)
  .style("fill", d3.color("gray"))
  .attr("opacity", 0.1);

Circles = svg.selectAll("circle")
  .data(Data)
  .enter().append("circle")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", Radius);

function getVisibleArea(t) {
  var l = t.invert([0, 0]),
    r = t.invert([width, height]);

  return Math.trunc(l[0]) + " x " + Math.trunc(l[1]) + "  -  " + Math.trunc(r[0]) + " x " + Math.trunc(r[1]);
}

function zoomed(d) {
  Circles.attr("transform", d3.event.transform);
  console.log("zoom transform: ", d3.event.transform);

  d3.select("#area span").text(getVisibleArea(d3.event.transform));
}

svg {
  position: absolute;
  top: 50;
}

<svg width="800" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<a id="area">visible area: <span>?</span></a>
<br>
<br>

D3v4 可见区域缩放坐标

D3v4 zoom coordinates of visible area

zooming

d3.js