Benutzerdefinierte D3 `tickValue` auf X-Achse - horizontales Balkendiagramm

Ich versuche, benutzerdefinierte Tick-Werte auf der X-Achse zu erstellen.Benutzerdefinierte D3 `tickValue` auf X-Achse - horizontales Balkendiagramm

Das Diagramm wird aus der Datei data.csv generiert. Es gibt 144 Datenpunkte. Jeder Datenwert entspricht einem 10-Minuten-Zyklus, daher sollte der erste Tick am 6. Tick erscheinen, der 1 Stunde entspricht.

Wenn ich zum Beispiel .domain([new Date('2014-03-08T12:00:00'), new Date('2014-03-9T00:00:00')]) verwende, bekomme ich X-Achse richtig, aber mein Diagramm wäre weg.

Ich kann tickValues([]) in diesem Fall auch nicht verwenden.

Was ich auf der X-Achse sehen sollte, ist so etwas wie 00:00 AM...(6 tick values)...1:00 AM...(6 tick values)...2:00 AM usw. Oder es könnte 00:00 AM...(12 tick values)...2:00 AM...(12 tick values)...3:00 AM usw. sein, nur um es anpassen zu können.

Nicht sicher, ob das überhaupt möglich ist. Ich habe versucht, dieses einfache Beispiel http://bl.ocks.org/phoebebright/3059392 zu folgen, aber wieder, ich bekomme X-Achse richtig, aber mein Diagramm ist weg.

Dies würde der Code: https://plnkr.co/edit/kc4E43Bgo4bNMB9hKX2j?p=preview

Vielen Dank im Voraus!

Quelle

2017-01-04 Nikki

Ich bin con verschmolzen. Welche Ticks willst du genau? Ihre Daten scheinen keine Daten zu enthalten. – Anko

Meine Daten enthalten keine Daten, nein. Ich möchte benutzerdefinierte Tick-Werte haben, die nicht aus der CSV-Datei stammen. – Nikki

Da Ihre Daten nicht tatsächlichen Datumswerte enthalten, das ist meine Lösung:

Sie wollen einen Tick zeigen, von 6, da jede Zecke 10 Minuten repräsentiert, und Sie wollen nur zeigen, die " stündlich "ankreuzen. So definieren Sie die Zecke Werte Ihre x Skala Domäne mit:

.tickValues(d3.range(x.domain()[0], x.domain()[1]).filter(function(d) { 
    return d % 6 === 0; 
}))

Und dann formatieren Sie die Ticks hinzufügen eine :00 zu jeder:

.tickFormat(function(d) { 
    return d/6 + ":00"; 
});

Hier ist die aktualisierte Plunker: https://plnkr.co/edit/8EOGt8UvYq1J8qpIdArN?p=preview

Edit: Wie in den Kommentaren diskutiert, hier ist die Lösung mit "am" und "pm": https://plnkr.co/edit/OvtVlgT4I6Y19hgoMKIK?p=preview

Quelle

2017-01-04 02:21:09

Danke Herr Furtado! Du warst wieder sehr hilfreich! Ich sehe genau, was Sie mit '.range' und' .filter' gemacht haben, aber es sieht immer noch nicht ganz intuitiv aus. Wenn ich zum Beispiel die Nummer 18:00 sehe, ist es immer noch verwirrend zu erkennen, dass es tatsächlich 3 Stunden ist. Ich werde sehen, ob ich json dafür mit Daten bekommen kann. Aber als ich ganz neue Karte brauche. Ich verstehe, dass dies der nächste ist, den ich bekommen kann ... Wenn Sie das sagen, muss es es sein, da ich keine tatsächlichen Datumswerte habe. Vielen Dank noch mal! – Nikki

Sie können in eine 24-Stunden-Ticks (ich kann Ihnen zeigen, wie es geht später, ich bin auf meinem Handy jetzt), sogar mit am und pm, aber darauf hingewiesen, dass dies ein ** total gefälscht wäre ** Achse. –

Keine Eile! Ich danke dir sehr! Ich bin mir bewusst, dass dies eine falsche Achse sein wird. Und das ist in Ordnung! Was auf dem Chart steht, kommt von csv, und das ist das Wichtigste. Es gibt 144 Datenwerte für 24 Stunden mit 10 Minuten Intervall. Vielen Dank!!! – Nikki

Benutzerdefinierte D3 `tickValue` auf X-Achse - horizontales Balkendiagramm

Antwort

Verwandte Themen