d3.js - d3js 折线图——如何将最后一步扩展到范围的末尾？

Question

这很简单，但我无法摆脱这个问题。

一条线是两个点(值)之间的链接，从值 A 绘制到值 B。假设 A 的值为 10，B 的值为 20，而 C 缺失。这条线现在从 0 到 10 到 20 绘制并完成。我想画从 0 到 10 到 20 到 25 的线。值是 x 轴的刻度(0、10、20、30、40)。在不改变我的行首的情况下这是否可能，所以它仍然从 x 轴的零点开始？

当然不用在 20 到 25 之间再画一条线 :)

我的线路代码:

 var line = d3.svg.line()
        .defined(function (d) { return d.value != null; })
        .x(function (d, i) {                
            return x(d.xValue);
        })
        .y(function (d) {
            return y(d.value);
        }).interpolate("step-after");

提前谢谢

这里有两张图片。第一个，它现在的样子，第二个，它应该是什么样子。

_{(来源:www.axi.at)}

_{(来源:www.axi.at)}

©a-x-i(d3js 快把我逼疯了，但它很酷....)

Answer 1

d3 永远不会将一条线延伸到最终数据点之外。但是，线的外观以及数据点的连接方式取决于 interpolator d3.svg.line 的设置。

举个简单的例子，假设您只有两个点 (10,20) 和 (15,30)。

普通(“线性”)插值器会在它们之间画一条直线。

“step-after” 插值器从第一个点 (10,20) 开始，并在第二个点的 x 值(即 (15 ,20) )，然后绘制一条直到 (15,30) 的垂直线。结果:第一个值显示为一条水平线，在应用第二个值之前一直保持不变。

相比之下，"step-before" 插值器从第一个点 (10,20) 开始，并在 y 值处绘制 垂直 线第二点(即到 (10,30) )，然后将水平线绘制到 (15,30)。结果:第一个值仅显示为垂直步长的起点，第二个值显示为在其间的时间内保持不变。

最后，"step" 插值器在两个 x 值之间更改 y 值中途。结果是开始值和结束值都显示为水平线，它们之间的距离持续了一半。

以下是不同行插值器选项的比较:
http://fiddle.jshell.net/c2mru/1/

我认为最适合你的是:

• 使用“step”插值函数
• 将线条的 x 值设置为水平条的中间。

你可以通过改变来做到这一点

 var line = d3.svg.line()
        .defined(function (d) { return d.value != null; })
        .x(function (d, i) {                
            return x(d.xValue);
        })
        .y(function (d) {
            return y(d.value);
        }).interpolate("step-after");

到

 var line = d3.svg.line()
        .defined(function (d) { return d.value != null; })
        .x(function (d, i) {                
            return x(d.xValue) + x.rangeBand()/2;
        })
        .y(function (d) {
            return y(d.value);
        }).interpolate("step");

这将导致一条线从第一个条的中点开始，到最后一个条的中点结束，但用一条水平线清楚地显示每个条的值。

如果你真的必须在你的范围的最后一行开始和结束，那么你有两个选择:

• 创建 custom interpolation function ;或者，
• 在将数据数组传递给 d3.svg.line 时添加一个“最终值”数据点。