如何使用d3获得步进函数中的最后一步？

Question

我在d3中使用了一个简单的折线图,插入了"后续步骤".

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/)这显示除了最后一个数据点之外的每个数据点之后的水平线.

对于少量的点,如果您将x轴视为时间,则这是不直观的,因为最后一个间隔不会显示.

我试图在数据的末尾添加一个额外的点,使用null或NaN值.

// 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/)

这样可以提供更好的外观,但由于NaN值,它会在行的路径中触发svg解析错误.

我也尝试使用line.defined()函数,但这也无济于事,因为如果我使附加点未定义,则在实际数据的末尾不会绘制任何步骤.

任何人都可以建议一种方法来处理这个问题,而不会触发解析异常？