d3在任意線上填充折線圖

Question

我正在嘗試用d3創建一個簡單的折線圖，但出於某種原因它正在填充線和某個中點之間。下面是輸出：

我的javascript如下：

 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

這裏的解決方案是消除填充，而是設置了行程。你可以直接在JS中用d3或CSS來做到這一點。

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

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