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?

• javascript
• d3.js

• 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 2

Try 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.