Detecting visible nodes in d3.js force layout after scaling

Question

I use the force-directed layout in d3.js once at boot time to place nodes and edges. Then I can zoom and pan the svg. When I zoom in, I want to determine which nodes and edges are visible, so I can implement lazy loading of additional data only for visible nodes and edges.

Does anyone know what is the best way to get (partially) visible elements?

The code below (just embed a few examples together):

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

If you use scales, you can find the visible range using scale.invert . Therefore, to find visible values ​​for an axis where the width is 600 pixels, use x.invert(0) and x.invert(600) .