D3 Non-Continuous Dates Domain gibt Lücken auf der X-Achse

Question

Ich möchte einige Zeitreihendaten, die nicht kontinuierlich ist (Lücken in den Daten für Wochenenden, Feiertage, etc ..). Es sind tägliche Daten.

Die Daten sieht etwa so aus:

date,value 
1/2/15,109.33 
1/5/15,106.25 
1/6/15,106.26 
1/7/15,107.75 
1/8/15,111.89 
1/9/15,112.01 
1/12/15,109.25 
1/13/15,110.22 
... 

So definiere ich meine x und yscales:

var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

Und die Domain aus der Liste meiner Quelldaten festgelegt:

x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain(d3.extent(data, function(d) { return d.value; })); 

Die Problem ist jedoch, dass meine Daten Lücken haben Sie. Und meine X-Achse enthält jetzt die fehlenden Daten (d3.time.scale() macht das automatisch, weil es auf einen kontinuierlichen Bereich abbildet?).

.extent() findet die Max- und Minwerte in date, dann gibt .domain() diese Max- und Minwerte als den Bereich für die X-Achse zurück. Aber ich bin mir nicht sicher, wie ich mit Lücken umgehen soll und gebe die Nicht-Lücken-Daten in den Bereich zurück.

Also meine Frage ist: Wie kann ich meine X-Achse Bereich nur die Daten, die in meinem Datensatz sind? Und nicht "die Lücken ausfüllen". Sollte ich mit dem d3.time.scale().range() spielen? oder muss ich einen anderen scale verwenden?

Was ist der richtige Weg, dies zu tun? Kann mir bitte jemand in die richtige Richtung zeigen oder ein Beispiel geben? Vielen Dank!

Auch bitte, ich möchte mit nur einfach d3 und Javascript lösen. Ich bin nicht daran interessiert, Abstraktionsbibliotheken Dritter zu verwenden.

Answer 1

Wie Lars Kothof darauf hinweist, können Sie eine Ordinale X-Achse erstellen, die wie eine Zeitskala aussieht. Angenommen, Sie möchten Ihre Zeitreihe als eine Linie zeichnen, hier ist ein Beispiel, wie es geht: http://jsfiddle.net/ee2todev/3Lu46oqg/

Wenn Sie Ihr Format für die Daten anpassen möchten, z. Geben Sie das Datum als Tag (der Woche), Tag und Monat an und konvertieren Sie die Zeichenfolge zuerst in ein Datum. Ich habe ein Beispiel hinzugefügt, das die Daten in einem gemeinsamen deutschen Format formatiert. Aber Sie können den Code einfach an Ihre Bedürfnisse anpassen. http://jsfiddle.net/ee2todev/phLbk0hf/

Last, but not least, können Sie

axis.tickValues([values]) 

verwenden, um die Daten, die Sie anzeigen möchten, wählen. Siehe auch: https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

Answer 2

Die Komponente d3fc-discontinuous-scale passt alle anderen Skalierungen (z. B. eine d3-Zeitskala) an und fügt das Konzept der Diskontinuitäten hinzu.

Diese Diskontinuitäten werden über einen "Diskontinuitätsanbieter" ermittelt, der es ermöglicht, die Wochenenden zu überspringen, die in discontinuitySkipWeekends eingebaut sind.

Hier ist ein Beispiel:

const skipWeekendScale = fc.scaleDiscontinuous(d3.scaleTime()) 
    .discontinuityProvider(fc.discontinuitySkipWeekends()); 

Und hier ist eine komplette Demo: https://bl.ocks.org/ColinEberhardt/0a5cc7ca6c256dcd6ef1e2e7ffa468d4