d3 Biểu đồ đường kẻ đầy tại đường tùy ý

Question

Tôi đang cố gắng tạo biểu đồ dạng đường đơn giản với d3, tuy nhiên vì lý do nào đó, biểu đồ này nằm giữa đường kẻ và một số điểm giữa. Dưới đây là kết quả:

javascript của tôi là như sau:

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

đâu lần có dạng:

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

Tôi khá mới tại d3 vì vậy tôi m chắc chắn nó là một cái gì đó đơn giản, nhưng nó làm tôi phát điên.

Xin cảm ơn trước.

Answer 1

Điểm giữa bạn đang thấy chỉ là kết nối của điểm đầu tiên và điểm cuối cùng. Điều này là do đường dẫn bạn đã tạo (theo mặc định) một màu đen. Mặc dù đó là một con đường mở (ví dụ, điểm đầu tiên và cuối cùng không thực sự được kết nối), nếu được lấp đầy, nó sẽ xuất hiện đóng lại:

Thao tác điền đầy các đường con mở bằng cách thực hiện thao tác điền như thể bổ sung " closepath "lệnh đã được thêm vào đường dẫn để kết nối điểm cuối cùng của đường con với điểm đầu tiên của đường con.

Nguồn: SVG specification qua this SO answer

Giải pháp ở đây là để loại bỏ các điền và thay vào đó thiết lập một cơn đột quỵ. Bạn có thể làm điều này trực tiếp trong JS với d3 hoặc thông qua CSS.

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

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