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:
as suggest, can iterate data. downside need derive shape information data again same way did when created
<rect>
elements.do
timeline.selectall("rect")
grab elements potentially care , useselection.filter
pare down based onx
,y
,height
,width
attributes.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
Post a Comment