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

D3 트리에서 텍스트 래핑

D3 트리 시각화에서는 때로는 노드에 텍스트 레이블을 래핑하여 트리가 더 읽기 쉽습니다. 이 문서에서는 텍스트 래핑을 달성하는 방법을 보여줍니다.

도전

다음 D3 트리를 고려하세요.

Foo is not a long word

이상적으로 텍스트는 다음과 같아야 합니다. 다음으로 줄 바꿈:

Foo is
not a
long word

해결책

텍스트 줄 바꿈을 수행하려면 두 가지 주요 수정 사항이 필요합니다.

1. 랩 함수 만들기:

   랩 함수를 구현하여 노드를 배치하고 래핑 너비를 제어합니다.

   <code class="javascript">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);
               }
           }
       });
   }</code>

   로그인 후 복사

2. 래핑 기능 사용:

   각 노드에 텍스트를 설정하는 대신 줄 바꿈 기능:

   <code class="javascript">// 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); // wrap the text in <= 30 pixels</code>

   로그인 후 복사

이러한 수정 사항을 구현하면 D3 트리 노드에서 텍스트를 성공적으로 줄 바꿈할 수 있습니다.

위 내용은 가독성을 높이기 위해 D3 트리 시각화에서 텍스트 레이블을 어떻게 래핑할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!