Ändern der Größe von d3 / dagre-d3 svg, um alle Inhalte anzuzeigen
Ich versuche, DAGs mit dagre-d3 zu erstellen. Die Daten für diese DAGs stammen aus einer Datenbank, sind für jede DAG unterschiedlich und daher kenne ich die Breite / Höhe nicht, um den enthaltenen Svg anzugeben, bevor alle Knoten und Kanten zum Diagramm hinzugefügt werden.
Im Idealfall würde ich nach dem Hinzufügen aller Knoten und Kanten etwas wie d3.select("#svg1").resize_to_match_contents() nennen, um sicherzustellen, dass alle Knoten sichtbar sind und die SVG nicht zu groß ist. Natürlich gibt es keine solche Funktion, und ich habe keine Ahnung, wie ich das umsetzen soll. Ich weiß, dass ich d3.select("#svg1").attr("height", "10") aufrufen kann, um die Höhe festzulegen, aber ich habe keine Ahnung, wie ich die Höhe des Elements <g> im SVG abrufen / berechnen kann.
1 Antwort
Die internen und externen Dimensionen von SVG können unabhängig von der viewBox Attribut. Wenn Sie davon sprechen, die Größe des g -Elements zu finden, ist dies nur sinnvoll, wenn keine viewBox definiert ist und keine anderen scale Transformationen vorhanden sind.
So würde ich vorschlagen, dass Sie es tun:
- Setzen Sie
width/heightdessvg-Elements aufwindow.innerWidthundwindow.innerHeightoder auf die maximale Dimension, zu der es wachsen soll. - Setzen Sie das
viewBoxAttribut auf etwas wie"0 0 100 100"und definieren Sie dann alle Maßstäbe in Ihrem Code, um die Domäne[0, 100]zu haben. Dadurch wird sichergestellt, dass der Graph verkleinert wird, um in den von Ihnen festgelegten Bereich zu passen.
Sehen Sie sich auch an, wie nvd3 die Fenstergröße ändert und wie das Koordinatensystem im SVG-Element bei der Größenanpassung mithilfe von preserveAspectRatio beibehalten wird.
Ausgehend von dem, was ich von ihrer Webseite abrufen konnte, erlaubt esge-d3 nicht, die Layout-Optionen so einzustellen, dass die Render-Größe explizit eingeschränkt wird, und gibt nicht die maximalen Dimensionen zurück, die sie verwendet hat. Man könnte jedoch getBBox() verwenden, um die Dimensionen der g Box zu erhalten Es wurde gerendert und versucht% o_de% so zu setzen, dass es nur auf das SVG passt (oder setze viewBox , height auf SVG so, dass es der Dimension für width 1: 1 entspricht , aber das könnte zu einem fehlerhaften Layout führen.
Tags und Links javascript svg d3.js dagre-d3