I am trying to create a realtime line graph in D3. My data is in the format of [[Date, value], [Date, value]. When I don't receive any data the value will be 0. I would like the line to break for these values so they are not plotted. I would then get gaps in my graph where I am missing data.
Anyone have any ideas how I would do this?
I am trying to create a realtime line graph in D3. My data is in the format of [[Date, value], [Date, value]. When I don't receive any data the value will be 0. I would like the line to break for these values so they are not plotted. I would then get gaps in my graph where I am missing data.
Anyone have any ideas how I would do this?
Share Improve this question asked Jan 3, 2013 at 15:32 dtsndtsn 1,1071 gold badge11 silver badges17 bronze badges 2- 1 Have you written any code so far ? – Sirko Commented Jan 3, 2013 at 15:34
- I do, I have created a JS fiddle of what I currently have: jsfiddle/srZwS/1 – dtsn Commented Jan 4, 2013 at 12:18
2 Answers
Reset to default 11Try this. Variable my_dataset is array of objects with attributes {x,y}. "NaN: as y-value is skipped in visualization.
var line = d3.svg.line()
.x( function( d, i) { return x( d.x); })
.y( function( d) { return y( d.y); })
.defined( function( d) { return !isNaN( d.y); })
;
my_visualization.append( "svg:path")
.data( [ my_dataset])
.attr( "d", line)
You could easily do this by creating several plots on a single set of axis. Each continuos sets of data would be a separate plot. Then just make sure you assign them all the same colour etc.