d3.js - Combining semantic zooming and quadtree brushing in D3 -

d3.js - Combining semantic zooming and quadtree brushing in D3 -

i trying combine implementation of semantic zoom brush selection tool quadtree on scatterplot in d3. thought zoom active default. on input selection, brush created , mousedown event of zoom deactivated. speed brushing, organize info visible (i.e. info has been zoomed on) in quadtree (c.f. http://bl.ocks.org/mbostock/4343214). have no thought how create quad tree zoom extent only.

i tried creating quadtree such:

var scalex = d3.scale.linear() .domain(...) .range(...); var scaley = d3.scale.linear() .domain(...) .range(...); // var info array of objects containing coordinates (x,y) var datacoords = data.map(function(d){return [scalex(d.x) scaley(d.y)];}); /****** define d3.zoom.extent not exist (contrary d3.brush.extent()) *******/ var s= d3.event.scale; var t = d3.event.translate; //top left corner var tl = ...; //bottom right corner var br = ...; d3zoom.extent = [tl, br]; /****** create quadtree extent *******/ var quadtree = d3.geom.quadtree() .extent(d3zoom.extent)(datacoords);

but not work. way managed quadtree pre-create using total svg extent, before zoom:

var quadtree = d3.geom.quadtree() .extent([[-1, -1], [size + 1, size + 1]])(datacoords);

when pre-create quadtree before zooming on entire data, , zoom afterward, quadtree desynchronizes newly zoomed info because values in info depend on axes scale updated during zoom event (semantic zooming).

i haven't been able combine http://bl.ocks.org/mbostock/4343214 , zooming , brushing in d3 forcefulness directed graph, , haven't found relevant in http://techslides.com/over-2000-d3-js-examples-and-demos or http://bl.ocks.org or so.

could please give me fiddle shows how brush on quadtree contains subset of info zoomed upon?

d3.js zooming brush quadtree