Dagre Tree

この例では、dagre.js を Svelte Flow と統合して、シンプルなツリーレイアウトを作成する方法を示します。dagre の優れた代替手段としては、より高度なレイアウトライブラリをお探しの場合、d3-hierarchy または elkjs があります。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

読み取り専用

この例は、静的なレイアウトのデモンストレーションです。グラフ内のノードまたはエッジが変更された場合、レイアウトは再計算されません！ dagre（および他のライブラリ）で動的なレイアウトを行うことは可能ですが、今のところその例はありません！