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