Ich versuche eine Achsenfunktion zu erstellen, dass die Ticks / Labels dynamisch sind, was bedeutet, dass sie sich automatisch verstecken / anzeigen. Darüber hinaus möchte ich bei einigen Zoomstufen aufhören, mehr Ticks / Labels zu rendern. Hier ist ein Beispiel: Zuerst zeigt die Achse die Jahre, dann, wenn Sie die Ticks vergrößern, werden die Monate, und wenn Sie weiter hineinzoomen, werden die Tage angezeigt (I. E., 28. Dez.). Außer ich möchte d3 so einschränken, dass beim Zoomen über die Monate hinaus keine Ticks mehr gerendert werden, weil Monate die kleinste Einheit sind, die ich will.
Ich habe ein paar Beispiele, die, wenn kombiniert, genau das sind, was ich will, aber ich kann nicht herausfinden, wie das geht.
Außerdem: Ich habe das .tickFormat hinzugefügt, weil ich jeden Tick anzeigen möchte, um ein abgekürztes Monatsformat zu haben.
Beispiel 1: Ссылка
%Vor%Dieses Beispiel zeigt, wie die Ticks / Beschriftungen beim Vergrößern erscheinen und verschwinden, ABER wenn Sie weiter hineinzoomen, teilt es die Monate und beginnt mit der Wiederholung der Monats-Ticks / Beschriftungen, und ich möchte den Benutzer nicht beim Zoomen einschränken in.
Beispiel 2: Ссылка
%Vor%Dieses Beispiel behebt das Problem, wenn Sie weiter zoomen, wie wir es in Beispiel 1 gesehen haben, aber es blendet die Ticks / Beschriftungen beim Zoomen nicht dynamisch aus.
Die nächste Antwort, auf die ich gestoßen bin, war das Multi-Scale-Zeitformat, das @Lars Kotthoff vorgeschlagen hat. Ich habe den benutzerdefinierten Zeitformatierer bearbeitet:
%Vor%Damit würden die Ticks selbst beim Zoomen erzeugt, aber die Labels wären leere Strings.
UPDATE:
Ich habe meine eigene Funktion erstellt, die ich in .ticks () verwendet habe. Ticks übergibt der Funktion den Skalenbereich wie t0 und t1. Ich habe die Diagrammbreite durch die Labelgröße (und das Padding) geteilt, um die maximale Anzahl an Labels ohne Überlappung zu finden, und mit Unterstrich jedes zweite Häkchen entfernt, wenn eine Überlappung auftritt.
%Vor%Update 2:
Hat die Zecke mehr als nur eine Stufe angepasst, hat sie jetzt 4 Stufen (2,3,4,6).
%Vor%Ich hatte ein ähnliches Problem, während ich an einem d3-Diagrammkomponenten-Layer arbeitete, und löste es mit dieser Methode, die ich vor der Achse aufruft Wiedergabe:
%Vor%In diesem Beispiel ist period ein Objekt, aber Sie können fest codierte Werte für Ihre Situation anstelle von period.seconds (das ist die Dauer eines Intervalls) und period.d3TimeInterval fields angeben.
%Vor%Der Grund, warum ich nicht jedes Mal in xAxis.ticks Sekunden verwende, ist, dass ich einen enormen Leistungsabfall hatte, wenn ich einen Tag als xAxis.ticks (d3.time.seconds, 86400) aussprach, also habe ich die benötigten Elemente gespeichert d3 in einem Feld.
Die Idee ist, mit den 2 Verhaltensweisen von axis.ticks zu spielen, entweder ein Intervall oder eine Zählung. Unterhalb des Schwellenwerts verwenden wir ein festes Intervall, oben kehren wir zum automatischen d3-Verhalten zurück. Dies löst das Problem des Herauszoomens nach dem Einzoomen. Ohne den else-Teil erhalten Sie eine Menge von Ticks, die in dem von Ihnen angegebenen Intervall bleiben.
Und wenn Sie nur ein einfaches Beispiel kopieren / einfügen möchten, ist hier ein Beispiel für ein minimales Intervall von 1 Tag:
%Vor%Tags und Links javascript d3.js