How to get the last “step” in a step function using d3?

问题

I'm using a simple line graph in d3 with interpolation of "step-after".

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });
// Note that with step-after, the last data point shows no "step". Why?
line.interpolate('step-after');

(http://jsfiddle.net/hrabinowitz/zCmHw/1/) This shows a horizontal line after each data point except the last one.

For small numbers of points, if you think of the x axis as time, this is unintuitive, because the last interval does not show up.

I've tried to simply add an extra point at the end of the data with null or NaN value.

// add a null entry after last date
var DAY_IN_MILLIS = 24*60*60*1000;
dataArray.push(
    {date: new Date(dataArray[dataArray.length-1].date.getTime() + DAY_IN_MILLIS), 
     close:NaN});

(http://jsfiddle.net/hrabinowitz/abJLf/49/)

This gives a better appearance, but it triggers an svg parsing error in the path for the line, because of the NaN value.

I've also tried to use the line.defined() function, but this does not help either, since if I make the additional point undefined, then no step is drawn at the end of the real data.

Can anyone suggest a way to handle this problem without triggering a parsing exception?

来源：https://stackoverflow.com/questions/20009444/how-to-get-the-last-step-in-a-step-function-using-d3