svg – 在zoom-pan之后检测d3.js中的可见节点强制布局

2024年1月15日 200次阅读

我在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)
}

最佳答案 如果使用比例,则可以使用scale.invert找到当前可见的范围.因此,要查找宽度为600px的轴的可见值,请使用x.invert(0)和x.invert(600).

点赞