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

事先提前

这里有两张照片。第一个，它现在看起来如何，第二个，它应该是什么样子。

now http://www.axi.at/webimages/year2013_old.png then http://www.axi.at/webimages/year2013_new.png ©a-x-i（d3js让我疯狂，但很酷......）

Answer 1

d3永远不会超出最终数据点。但是，该行的外观以及数据点的连接方式取决于d3.svg.line的{{3}}设置。

举一个简单的例子，假设你只有两个点（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值中途。结果是，起始值和结束值都显示为水平线，持续它们之间距离的一半。

以下是不同线路插补器选项的比较：
interpolator

我觉得最适合你的是你：

使用“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");

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

如果您的必须在您的范围的最后开始和结束，那么您有两个选择：

创建http://fiddle.jshell.net/c2mru/1/;或者，
将数据数组传递给d3.svg.line时添加“结束值”数据点。

d3js折线图 - 如何将最后一步延伸到范围结束？

1 个答案: