D3 JS Liniendiagramm startet von 0

Question

Ich erstelle ein Liniendiagramm mit D3 JS V4. Bitte beachten Sie die fiddle.

var line = g.append("path") 
    .data([lineData]) 
    .attr("class", "line") 
    .attr("d", valueLine) 
    .style("fill", "none") 
    .style("stroke-width", 2) 
    .style("stroke", "#000"); 

Der Pfad beginnt bei 0 der x-Achse. Entsprechend den Daten sollte es vom ersten x-Wert ausgehen. Wie kann ich den Pfad vom ersten x-Wert starten lassen?

Answer 1

Sie sollten keine Bandwaage verwenden, die eine zugehörige Bandbreite hat. Verwenden Sie beispielsweise Bandmaße für Balkendiagramme.

Eine Alternative wird unter Verwendung einer Skala statt:

var x = d3.scalePoint() 
.rangeRound([0, width]) 
    .padding(0.5); 

Hier ist das Update Geige: https://jsfiddle.net/gzf7o6sh/