見た目の魅力を向上させるために D3 ツリー図でテキストを折り返す方法

D3 でテキストを折り返す

チャレンジ

D3 ツリー図の視覚的な魅力を高めるには、テキストが収まるように折り返すことが望ましいです。利用可能なスペース内にきちんと収まります。次のテキストを考えてみましょう:

Foo is not a long word

このテキストを次のようにラップしようとします:

Foo is
not a
long word

解決策

D3 でテキストをラップする鍵は、 内の要素要素。 単一の 内に複数行のテキストを作成できます。

これを実現するために、Mike Bostock の「長いラベルのラッピング」の例を修正し、2 つの重要な変更を導入します。

1. ラップ関数を定義します。 この関数テキストと最大幅を引数として受け取り、 を挿入します。

function wrap(text, width) {
    // Implement text wrapping logic...
}

2. コード内でラップを利用します: 各ノードのテキストを直接設定する代わりに、wrap 関数を呼び出します。各ノードのテキスト要素。

// Add entering nodes with wrapped text.
node.enter().append("text")
    .attr("class", "node")
    .attr("x", function (d) { return d.parent.px; })
    .attr("y", function (d) { return d.parent.py; })
    .text("Foo is not a long word")
    .call(wrap, 30);

このアプローチにより、各ノード内のテキストが指定された最大幅内に収まるように折り返され、ツリー図の視覚的なプレゼンテーションが強化されます。

以上が見た目の魅力を向上させるために D3 ツリー図でテキストを折り返す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。