D3.js Liniendiagramm, X-Achse haben beliebige Daten, aber wollen sie nacheinander zeigen

Question

Ich habe ein Liniendiagramm. X-Achse haben Daten, aber sie sind nicht normal verteilt (keine Daten für Mittagessen oder Wochenenden), aber ich möchte sie sequenziell zeigen. Beispieldaten und meine Beispielgrafik ist unten, ich möchte nicht, dass mein Diagramm eine gerade Linie für die Zeit zeigt, die keine Daten hat, sollte es vom vorherigen Datum fortgesetzt werden.

Ich verwende x = d3.time.scale().range([0, width]), um x-Linie zu zeichnen. Irgendeine Idee?

x   y 
10:00:00 4 
10:10:00 5 
10:20:00 3 
10:30:00 2 
10:40:00 5 
10:50:00 3 
14:30:00 6 
14:40:00 7 

Answer 1

Ein ordinal scale würde den Trick tun. Probieren Sie etwas wie folgt aus:

x = d3.time.scale().range([0, width]) Ersetzen Sie unter:

var x = d3.scale.ordinal() 
    .domain(data.map(function(d) { 
     return d.date; 
    })) 
    .rangeRoundBands([0, width], 0.1);