「彎曲」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; 
     }    
    }); 

但是，區域圖的右邊緣是「彎曲的」。這裏是什麼樣子：

任何想法，爲什麼，什麼我可以做，使該地區圖表，完美的垂直邊緣結束？

Answer 1

您要讓它使用數據點直到「this_week_number」，並且在此之後的所有星期使用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）