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

这很简单，但我解决不了这个问题

一条线是两个点（值）之间的链接，从值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");

提前thx

这里有两张照片。第一个，它现在看起来怎么样，第二个，它应该看起来怎么样

（来源：）

（来源：）

---

©a-x-i（d3js让我疯狂，但它很酷……）

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

d3.svg.line

的设置

举个简单的例子，假设你只有两个点（10,20）和（15,30）

法线（“线性”）插值器将在它们之间绘制一条直线

“插值器之后的”步从第一个点（10,20）开始，画一条水平线到第二个点的x值（即到（15,20）），然后画一条垂直线到（15,30）。结果：第一个值显示为一条水平线，在应用第二个值之前保持不变

相反，插值器之前的步从第一个点（10,20）开始，绘制一条垂直线，直到第二个点的y值（即到（10,30）），然后绘制水平线到（15,30）。结果：第一个值仅显示为垂直步长的起点，第二个值显示为在这两个值之间保持不变

最后，“步长”插值器在两个x值之间改变y值的一半。结果是，起始值和结束值都显示为水平线，长度为它们之间距离的一半

下面是不同直线插补器选项的比较：

我认为如果你：

• 使用“步长”插值函数
• 将直线的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");

到

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

如果您的产品线的起点和终点必须在您的产品线的最末端，那么您有两个选择：

• 创建一个；或者
• 将数据数组传递到

  d3.svg.line

  时，添加一个“结束值”数据点

---

为什么svg.line只有x和y？它应该是x1、y1、x2和y2。如果你想重新画一行，使它更长，只需选择它，并给它一些新的开始值和结束值。不确定我是否理解你想要的。如果25不在您的域中，您如何将该行设置为25？您能否发布一张图片，说明您希望该图形的外观，以及您的数据点是什么？@EightBitBoy:就像这里的代码：@AmeliaBR:原始问题中添加的图片。泰晤士河。对于将来在查找d3插值函数信息时遇到此问题的任何人，比较不同的曲线插值器可能更有用。您是否有可能提供一个自定义插值，该插值在范围结束后执行一步？@Cameron您可以，虽然默认情况下直线插补器不接收有关总范围的信息，但是您需要使用生成器模式：创建一个获取此信息的函数并返回直线生成器将使用的函数。用额外的端点填充数据数组可能更容易。

 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");