svg - 在缩放平移后检测 d3.js 强制布局中的可见节点

Question

我在加载时在 d3.js 中使用强制定向布局来定位节点和边缘。然后我可以缩放和平移 svg。当我放大时，我想检测哪些节点和边是可见的，这样我就可以只为可见节点和边实现附加数据的延迟加载。

有谁知道获得(部分)可见元素的最佳方法是什么？

代码如下(只是将一些示例粘贴在一起):

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("pointer-events", "all")
  .append('svg:g')
  .call(d3.behavior.zoom().on("zoom", redraw))
  .append('svg:g')

svg.append('svg:rect')
  .attr('width', width)
  .attr('height', height)
  .attr('fill', 'white')

function redraw() {
  trans=d3.event.translate;
  scale=d3.event.scale
  svg.attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")")
  console.log(scale)
}

Answer 1

如果您使用比例尺，您可以使用 scale.invert 找到当前可见的范围。 .因此，要找到宽度为 600 像素的轴的可见值，请使用 x.invert(0)和 x.invert(600) .