D3.js Automatische Schriftgröße basierend auf dem individuellen Radius / Durchmesser des Knotens
Wie kann ich mit D3.js die Schriftgröße für jeden Knoten basierend auf ihrem individuellen Radius / Durchmesser automatisch anpassen?
Ich verwende einen Stil, der eine automatische Vergrößerung ermöglicht
%Vor%; * 10 + "px"; })
Dieser Effekt entfernt den Text von den kleineren Knoten. Ich habe auch eine Zoom-Funktion, mit der ich einen Punkt vergrößern kann, der ursprünglich 12 px bedeckt, um meinen gesamten Bildschirm abzudecken.
%Vor%Gibt es eine Möglichkeit, node-font automatisch zu formatieren, um in geeigneten Größen zu schreiben, so erscheint beim Zoomen die aufgerufene Knotenschrift proportional zur Knotengröße gegenüber einer einzelnen Schrift- Diese Größe passt jedem?
Die richtigen Listen Kreise: NAME (GRÖSSE)
Ich hätte gerne ein funktionierendes Beispiel, von dem ich lernen könnte. Bei der Bildgröße würde also der kleine grüne Punkt nördlich des Kreises neben dem P schwarze, nicht lesbare Wörter haben, bis wir hineinzoomen, um zu sehen, was auf dem Kreis steht. Das Ziel ist es, eine proportional lesbare Schriftart zu haben, wenn gezoomt wird.?
2 Antworten
Sie können dies tun, indem Sie die Textgröße basierend auf der Größe des Containers dynamisch festlegen. Dazu müssen Sie den Text hinzufügen, seine Begrenzungsbox abrufen, die Begrenzungsbox des Containerelements abrufen und die richtige Schriftgröße basierend auf der aktuellen Schriftgröße und den Begrenzungsrahmen ableiten.
Der Code würde ungefähr so aussehen.
%Vor% Dank der OP & amp; akzeptierte Antwort (beide Upvoted); Ich habe das etwas anders gemacht, weil mein Text innerhalb eines Kreises verschoben wurde, anstatt direkt entlang seines Durchmessers zu laufen. Der Textknoten hat einen dy -Wert, um ihn innerhalb des Kreises nach oben oder unten zu verschieben, und ich benutze das, um den Akkord zu ermitteln, den ich auf dem Kreis messen muss, damit mein Text immer noch automatisch an den gewünschten Höhenversatz angepasst wird. Es diente auch meinen Bedürfnissen besser, die berechnete Größe in einem Datenattribut auf dem Textelement zu speichern, anstatt die Quelldaten zu ändern. Ich dachte, es könnte für jeden hilfreich sein, der in der Zukunft darüber stolpert.
Tags und Links javascript d3.js