score:6

Accepted answer

In the end I solved this myself, based on the solution here. The trick is to remove the empty values as late as possible, so the positions of all values (points) on the canvas are preserved.

graph.selectAll("path.line")
    .data(data)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .defined(function(d) { return d.y; }) // Omit empty values.
    .x(function(d,i) { return x(i); }));

This will work for empty values at the start and end of a line.

score:2

This should do it:

.data(data, function(inptArray) { 
  return inptArray.filter(function(obj) {
   return obj.y != null;
  }) 
});

it would be better though to write it like this:

var validatedInput = function(inptArray) { 
 return inptArray.filter(function(obj) {
  return obj.y != null;
});

.data(data, validatedInput);

Or you can just format your data object before given it to D3:

var data = data.map(function(obj){
 return obj.filter(function(obj) {
  return obj.y != null;
 })
})

Related Query

More Query from same tag