d3 Liniendiagramm Füllung bei beliebiger Linie

Question

Ich versuche, ein einfaches Liniendiagramm mit d3 zu erstellen, aber aus irgendeinem Grund füllt es sich zwischen der Linie und irgendeinem Mittelpunkt. Hier ist die Ausgabe:

Mein Javascript ist folgende:

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

Wo Besuche von der Form ist:

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

Ich bin ziemlich neu bei d3 so I‘ Sicher ist es etwas Einfaches, aber es macht mich verrückt.

Vielen Dank im Voraus.

Answer 1

Der Mittelpunkt, den Sie sehen, ist nur die Verbindung des ersten und letzten Punktes. Dies liegt daran, dass der von Ihnen erstellte Pfad (standardmäßig) eine schwarze Füllung aufweist. Auch wenn es ein offener Weg ist (dh der erste und der letzte Punkt nicht tatsächlich angeschlossen ist), wenn gefüllt, erscheint es geschlossen:

Der Füllvorgang durch Ausführen der Füllvorgang als ob eine zusätzliche offene Subpfade füllt " closepath "Befehl wurde dem Pfad hinzugefügt, um den letzten Punkt des Unterwegs mit dem ersten Punkt des Unterwegs zu verbinden.

Quelle: SVG specification über this SO answer

Die Lösung hier ist die Füllung zu eliminieren und stattdessen einen Hub eingestellt. Sie können dies direkt in JS mit d3 oder über CSS tun.

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

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