트리 시각화의 가독성을 높이기 위해 D3에서 텍스트를 어떻게 래핑할 수 있나요?

D3에서 텍스트 래핑

D3 트리의 가독성을 높이려면 긴 단어가 레이아웃을 왜곡하는 것을 방지하기 위해 텍스트를 래핑하는 것이 포함될 수 있습니다. 이는 단일 텍스트 블록 내에 여러 줄을 생성할 수 있는 요소입니다.

텍스트 줄 바꿈을 구현하려면 다음 단계를 따르세요.

1. 래핑 함수 생성

Mike Bostock의 "Wrapping Long Labels" 예제를 기반으로 지정된 너비를 기준으로 요소를 텍스트 노드에 추가:

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. 텍스트 줄 바꿈 적용

각 노드의 텍스트를 직접 설정하는 대신 줄 바꿈 기능을 활용하여 지정된 너비 내에서 텍스트를 줄 바꿈합니다.

// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!