6

I have a large time series data set I need to graph, and am trying to use D3 to do it. I plan to have my graph have the x-axis be time, and allow for movement of the graph in the x direction. I want to have the graph only load/display the points that exist in the current time range on the screen.

For example, if my dataset has times 1-100, but the graph starts out with times 1-10 shown, the graph should only graph points 1-10. Then the user may move to the right and see times 5-15 and the graph should update accordingly.

Can anyone explain to me how this might be done via d3? I am having a hard time bridging the understanding from an entire data set being loaded in at once and graphed immediately to selective graphing of subsets of the data.

cdietschrun
  • 1,623
  • 6
  • 23
  • 39

1 Answers1

2

I think you are looking for the selection.filter() function. For example you can have: 

var allNodes = vis.selectAll("Nodes").data(data.nodes); 
var validNodes = allNodes.filter(function(d){return (d.time>1 && d.time <10)});
//use normal graph functions on validNodes.

You can also apply filter directly on the array of nodes.

Christopher Chiche
  • 15,075
  • 9
  • 59
  • 98
  • Thanks for the reply. Makes sense. Can I dynamically know how to set the bounds for the filter function? Ideally I'd like to get the bounds of the x axis, if you follow. If they scrolled over to 5-15, the bound should be d.time >=5 && d.time <=15 etc – cdietschrun Mar 04 '13 at 23:55
  • You should be able to find this in the API: https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis . Otherwise I don't know. – Christopher Chiche Mar 04 '13 at 23:59
  • 1
    I've had luck with x.domain() giving me the min and max of the x axis. I'll mark this as correct because I will need to use the filter with the domain information. – cdietschrun Mar 05 '13 at 00:40