＆＃34;歪＆＃34; d3.js区域图的结尾

Question

我试图制作一个与线图（使用相同的数据）匹配的区域图，直到图上的任意水平点。以下是我如何设置区域图：

    var area = d3.svg.area()
    .x(function(d,i) { return x(i); })
    .y0(each_graph_height)
    .y1(function(d,i) {
        if (i <= this_week_number) {
            return y(d);
        } else {
            return each_graph_height;
        }               
    }); 

然而，区域图的右边缘是'＃34;弯曲＆＃34;。这是它的样子：

任何想法为什么，以及如何使区域图以完美的垂直边缘结束？

Answer 1

您告诉它使用数据点直到＆＃34; this_week_number＆＃34;，并且在此之后的所有周内使用y = 0。但是x值仍然在增加，因此你有一个零宽度区域延伸到轴的末端。而且你仍然有一条线从本周的（x，y）数据点到下周的（x，0）数据点。

要实际裁剪区域，您需要裁剪x值和y值：

var area = d3.svg.area()
.x(function(d,i) {
    if (i <= this_week_number) {
        return x(d);
    } else {
        return x(this_week_number);
    }               
})
.y0(each_graph_height)
.y1(function(d,i) {
    if (i <= this_week_number) {
        return y(d);
    } else {
        return each_graph_height;
    }               
}); 

这应该有用，（你只需要在轴上的同一点积累点数），但更优雅的解决方案是使用defined函数来实际切出额外的数据点：

var area = d3.svg.area()
.x( function(d,i) { return x(i); } )
.y0( each_graph_height )
.y1( function(d,i) { return y(d); } )
.defined( function(d,i){ return i <= this_week_number; } );

（See this Mike Bostock example for a more conventional use of the defined method）