d3.js 영역 그래프의 "Crooked"끝

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 값은 여전히 ​​계속 증가하므로 축 끝까지 확장되는 너비가 0 인 영역이 있습니다. 그리고 이번 주 (x, y) 데이터 점에서 다음 주 (x, 0) 데이터 점까지 여전히 선이 그어져 있습니다.

이

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

작동해야 그 (방금에서 모든 포인트의 축적을해야합니다 :

실제로 영역을 자르려면, 당신은 X 값뿐만 아니라, Y 값을자를 필요

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)