Wie erstelle ich einen "slopegraph" in d3.js

Ich habe mit Ihrem ersten Beispiel ein bisschen herumgespielt, um das Problem der durcheinandergewürfelten Textbeschriftungen anzugehen, ich bin mir nicht sicher, wie nützlich das sein wird, aber falls es zur Diskussion beiträgt, dachte ich, ich würde es teilen ..

Meine erste Aufgabe bestand darin, den Text um die Textbeschriftungen eines Datenpunkts, über dem man schwebte, auszublenden. Dabei werden Textbeschriftungen ausgewählt, die die Begrenzungsbox der aktuell ausgewählten Beschriftung überlappen, und sie werden auf fast null Deckkraft gesetzt. Ссылка

Ich habe dann versucht, eine Möglichkeit zu finden, die Textbeschriftungen kompakt anzuordnen, so dass sie alle sichtbar sind. Ich habe die Implementierung nicht abgeschlossen, weil sie die Grenzen der Visualisierung zu sehr zu erweitern schien funktioniert derzeit nicht gut, wenn man das Jahr ändert ...), aber es könnte sich lohnen, auf etwas weniger "kompakte" Daten auf etwas wie dieses zu schauen: Ссылка

Edit: Es scheint, dass diese nicht wie vorgesehen in Firefox funktionieren, scheint ein Problem mit getBBox () ..

Gut geschriebene Frage und schöner Startcode mit Debugging-Anweisungen, Requisiten!

Ich bin nicht durch die Programmierung aller Dinge durchgekommen, an die ich gedacht habe, aber zumindest um der Diskussion willen, hier geht es. (Kodierung ist einfach; es ist schwieriger, sich mit dem zu befassen, was zu kodieren ist und wie das aussehen sollte.)

1. Eine [nicht optimierte] Version, die die lineare Skalierung als Richtlinie verwendet, aber Leerzeichen, die Einträge überlappen, indem alle nachfolgenden Einträge verschoben werden. (Ich denke, dass dies effektiv nur die Y-Achse dehnt; dies macht es leider zu einem sehr großen Bild. Versuchen Sie, näher liegende Jahre zu vergleichen, beispielsweise 2008 und 2009 - das Bild ist nicht so gestreckt.) Ссылка ( gist )

2. Dieselbe Methode wird auf die Ordinalskala angewendet. Ich bevorzuge die linear -Skala-Version, weil die ordinal -Skala-Version nicht versucht, absolute Informationen durch die Steigung zu übermitteln; Dies sorgt jedoch für ein kompakteres Bild. Ссылка ( gist )

3. Gruppierung von Werten zusammen. (Wird implementiert, wenn Interesse besteht.)

Beachten Sie, dass beide Beispiele 1 und 2 unvollständige Implementierungen sind, aber Sie erhalten die Idee. Wenn beides das ist, was Sie suchen, kann ich sie reparieren.

wollte nur ein weiteres Beispiel von Jefff Clark teilen:

Ссылка

Er hat die Verarbeitung verwendet, behandelt aber einige der oben genannten Probleme sehr elegant (man kann argumentieren, dass es auch mit einer normalisierten Variablen etwas einfacher ist)

1. Verwenden Sie expandierende Aggregate, um die Visualisierung zu vereinfachen und die anfängliche Anzahl von Datenpunkten zu reduzieren.
2. Markieren Sie vor allem eine Seite der Steigung für jeden Punkt
3. Versteckt die Beschriftungen an nahen / überlappenden Punkten, bis sie sich darüber bewegen (zu diesem Zeitpunkt verschwinden die ursprünglichen Beschriftungen vorübergehend)

Insgesamt hat Jeff damit einen hervorragenden Job gemacht. Ich denke, er zeigt viel Liebe zum Detail. Wäre gespannt auf ein ähnliches Beispiel in D3!