d3 임의 선에서의 선형 차트 채우기

Question

d3을 사용하여 간단한 선 차트를 만들려고합니다. 그러나 어떤 이유로 그것이 선과 중간 점 사이를 채 웁니다.

방문의 형식입니다

 var width = 500, 
      height = 500, 
      padding = 10; 

     var extentVisits = d3.extent(visits, function(obj){ 
      return obj['visits']; 
     }); 

     var extentDates = d3.extent(visits, function(obj){ 
      return obj['datestamp']; 
     }); 

     var yScale = d3.scale.linear() 
      .domain(extentVisits) 
      .range([height - padding, padding]); 

     var xScale = d3.time.scale() 
      .domain(extentDates) 
      .range([0, width]); 

     var line = d3.svg.line() 
      .x(function(d) { 
       return xScale(d['datestamp']); 
      }) 
      .y(function(d) { 
       return yScale(d['visits']); 
      }) 

     d3.select('#chart') 
      .append('svg') 
      .attr('width', width) 
      .attr('height', height) 
      .append("g") 
      .attr("transform", "translate(5,5)") 
      .append('path') 
      .datum(visits) 
      .attr("class", "line") 
      .attr('d', line); 

: 나는 '그래서

 visits = [{'datestamp': timestampA, 'visits': 1000}, 
        {'datestamp': timestampB, 'visits': 1500}] 

내가 D3 꽤 새로운 해요

내 자바 스크립트는 다음과 같다 : 여기에 출력이다 그것은 단순한 무엇인가 명확하다. 그러나 그것은 나를 미치게하고있다.

미리 감사드립니다.

Answer 1

보고있는 중점은 첫 번째 점과 마지막 점의 연결 일뿐입니다. 이것은 생성 한 경로가 (기본적으로) 검은 색 채우기를하기 때문입니다. 열려있는 경로 (즉, 첫 번째 및 마지막 점이 실제로 연결되어 있지 않아도)가 채워지면 닫힌 것처럼 보입니다.

채우기 작업은 채우기 작업을 추가 " closepath "명령이 경로에 추가되어 서브 경로의 마지막 지점과 서브 경로의 첫 번째 지점을 연결했습니다.

출처 : SVG specification 여기 솔루션은 채우기를 제거하고 대신 스트로크를 설정하는 것입니다

this SO answer를 통해. d3 또는 CSS를 통해 JS에서 직접이 작업을 수행 할 수 있습니다.

path.line 
{ 
    fill: none; 
    stroke: #000; 
} 

Demo showing both the CSS and JS method (commented out) on jsFiddle