ツリー ビジュアライゼーションの読みやすさを向上させるために、D3 でテキストを折り返すにはどうすればよいですか?

D3 でのテキストの折り返し

D3 ツリーの可読性を高めるには、長い単語によってレイアウトが崩れるのを防ぐためにテキストを折り返します。これは、<span> を使用することで実現できます。

テキストの折り返しを実装するには、次の手順に従います。

1.ラッピング関数の作成

Mike Bostock の「長いラベルのラッピング」の例に基づいて、 を追加する Wrap という名前の関数を定義します。指定された幅に基づいて要素をテキスト ノードに追加します:

function wrap(text, width) {
    text.each(function () {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, // ems
            x = text.attr("x"),
            y = text.attr("y"),
            dy = 0, //parseFloat(text.attr("dy")),
            tspan = text.text(null)
                        .append("tspan")
                        .attr("x", x)
                        .attr("y", y)
                        .attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan")
                            .attr("x", x)
                            .attr("y", y)
                            .attr("dy", ++lineNumber * lineHeight + dy + "em")
                            .text(word);
            }
        }
    });
}

2.テキストの折り返しを適用

各ノードのテキストを直接設定する代わりに、wrap 関数を利用して指定された幅内でテキストを折り返します。

// Add entering nodes in the parent’s old position.
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);

これにより、テキストが次の範囲内で折り返されます。 30 ピクセル。長い単語を収容するために必要に応じて複数の行を作成します。

以上がツリー ビジュアライゼーションの読みやすさを向上させるために、D3 でテキストを折り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。