d3 Riempimento del grafico a linee arbitrarie

Question

Sto tentando di creare un grafico a linee semplice con d3, tuttavia per qualche motivo si sta riempiendo tra la linea e un punto medio. Ecco l'output:

mio javascript è la seguente:

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

dove le visite è di forma:

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

Sono abbastanza nuovo a d3 così ho' Sono sicuro che sia qualcosa di semplice, ma mi sta facendo impazzire.

Grazie in anticipo.

Answer 1

Il punto medio che stai vedendo è solo la connessione del primo e dell'ultimo punto. Questo perché il percorso che hai creato ha (di default) un riempimento nero. Anche se è un percorso aperto (cioè, il primo e l'ultimo punto non sono effettivamente collegati), se riempita, essa apparirà chiuso:

L'operazione di riempimento riempie sottotracciati aperte eseguendo l'operazione di riempimento come se un ulteriore " comando "closepath" sono stati aggiunti al percorso per connettere l'ultimo punto del sottotracciato al primo punto del sottotracciato.

Fonte: SVG specification via this SO answer

La soluzione qui è quello di eliminare il riempimento e invece impostare un ictus. Puoi farlo direttamente in JS con d3 o tramite CSS.

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

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