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

thx提前

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

现在http://www.axi.at/webimages/year2013_old.png 然后http://www.axi.at/webimages/year2013_new.png©axi(d3js 让我疯狂,但很酷......)

Answer 1

d3永远不会超出最终数据点.但是,线的外观以及数据点的连接方式取决于插补器的设置d3.svg.line.

举一个简单的例子,假设你只有两个点(10,20)和(15,30).

正常("线性")插值器将在它们之间画一条直线.

在"一步后"内插开始于第一点(10,20),并绘制水平线出到第二点的x值(即,对(15,20)),然后绘制的垂直线最高(15,30).结果:第一个值显示为一条水平线,在第二个值适用之前保持不变.

相反,"step-before"内插器从第一个点(10,20)开始,并绘制一条垂直线直到第二个点的y值(即,到(10,30)),然后绘制水平线到(15,30).结果:第一个值仅显示为垂直步骤的起始点,第二个值在两者之间显示为保持不变.

最后,"台阶"插值改变y值中途两个x值之间.结果是,起始值和结束值都显示为水平线,持续它们之间距离的一半.

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

我觉得最适合你的是你:

• 使用"步进"插补器功能
• 将线的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");

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

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

• 创建自定义插值函数 ; 要么,
• 将数据数组传递给时,添加"结束值"数据点d3.svg.line.