최대 x 값을 기준으로 y 값의 줄을 추가하십시오.

Question

가장 최근 날짜를 기준으로 한 y 축의 한 점에서 수평선을 그리려하고 있습니다. 전의. 이 데이터 세트에서 date이 가장 최근 날짜 (2013-12-15)와 동일한 경우 y=38에 가로선을 그립니다. 이것은 내가 지금 무엇을 가지고 있지만 작동하지 않습니다 : 여기에 http://jsfiddle.net/Z3CSn/1/

var recentDay = d3.max(data, function (d) { return d.date }); 

svg.append("line") 
    .attr("x1", 0) 
    .attr("x2", width) 
    .attr("y1", yScale(recentDay.value)); 

원하는 최종 결과의 모의입니다 : 당신은 매우 가까운 https://dl.dropboxusercontent.com/u/23726217/line.PNG

Answer 1

하지만, 사소한 두 가지 문제가있다 당신의 코드.

1. 당신이 recentDay를 추출하는

   , d3.max는 대신 하루 종일 개체, 당신에게 최근의 일의 날짜를주고있다. Object를 가져 오는 가장 쉬운 방법은 날짜를 정렬 한 다음 첫 번째 날짜를 가져 오는 것입니다. 이 접근법은 단지 (대신 O (nlogn) 정렬 동작) data 내지 2 개의 선형 반복을 필요로하기 때문에

   var recentDate = d3.max(data, function(d){ return d.date; }) 
   , recentDay = data.filter(function(d){ return d.date == recentDate; })[0]; 
   

   는 I는 날짜별로 data 정렬 및 제 촬영 소자이 선호.

2. 줄에 y1과 y2을 모두 포함해야합니다 (기본값 : y2은 0). 예 : 이 두 가지 변경 사항을 통합

   는

   svg.append("line") 
       .attr("stroke", "#000") 
       .attr("x1", 0) 
       .attr("x2", width) 
       .attr("y1", yScale(recentDay.value)) 
       .attr("y2", yScale(recentDay.value)); 
   

, I 출력 아래 얻을. 다음은 업데이트 된 JSfiddle입니다.