Question

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

我尝试了很多但是无法使其工作，至少不是d3v4。使用v3并不是意见，因为项目的其他部分都使用v4。

Answer 1

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

＆＃13;

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

＆＃13;

svg {
  position: absolute;
  top: 50;
}

＆＃13;

<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>

＆＃13;

D3v4可见区域的缩放坐标

1 个答案: