d3.js - How do you get selected datums in brush "brush" event handler? -


i attempting create vertical timeline using d3.js linked map item(s) contained in brush displayed in map. kind of http://code.google.com/p/timemap/ d3 instead of simile , vertical timeline rather horizontal.

i can create svg vertical bars representing time ranges, legend, ticks, , brush. function handling brush events getting called , can obtain extent contains y-axis start , stop of brush. far good...

how 1 obtain datums covered brush? iterate on initial data set looking items within extent range feels hacky. there d3 specific way of getting datums highlighted brush?

var data = [   {      start: 1375840800,      stop: 1375844400,      lat: 0.0,      lon: 0.0   } ]; var min = 1375833600; //aug 7th 00:00:00 var max = 1375919999; //aug 7th 23:59:59 var yscale = d3.time.scale.utc().domain([min, max]).range([0, height]) var brush = d3.svg.brush().y(yscale).on("brush", brushmove);  var timeline = d3.select("#mydivid").append("svg").attr("width", width).attr("height", height);  timeline.selectall("rect")   .data(data)   .enter().append("rect")     .attr("x", function(datum, index) {return index * barsize})     .attr("y", function(datum, index) {return yscale(datum.start)})     .attr("height", function(datum, index) {return yscale(datum.end) - yscale(datum.start)})     .attr("width", function() {return barsize})  timeline.append("g")   .attr("class", "brush")   .call(brush)     .selectall("rect")     .attr("width", width);  function brushmove() {   var extent = brush.extent();   //how datums contained inside extent???? } 

you'll need kind of iteration figure out points live inside brush extent. d3 doesn't automatically you, because can't know shapes you're using represent data points. how detailed considered "selected" , isn't quite application specific.

there few ways can go this:

  1. as suggest, can iterate data. downside need derive shape information data again same way did when created <rect> elements.

  2. do timeline.selectall("rect") grab elements potentially care , use selection.filter pare down based on x, y, height , width attributes.

  3. if performance concern because have large number of nodes, can use quadtree helper partition surface , reduce number of points need looked @ find selected ones.


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -