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