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（）函数，但是这也没有帮助，因为如果我使附加点未定义，那么在真实数据的末尾不会绘制任何步骤。

有人能建议一种方法来处理这个问题，而不会触发解析异常吗？

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

0 个答案: