D3 확대/축소 가능한 Treemap에 단어 줄 바꿈

Question

D3 (http://bost.ocks.org/mike/treemap/)에 확대/축소 가능 트라이 맵을 구현하고 있지만 클릭하면 줄 수식이 URL로 이동하도록 수정했습니다. 제목이 너무 길면 줄임표도 추가됩니다.

잎사귀에 단어 줄 바꿈을 대신 구현하고 싶지만 작동시키지 못합니다. 나는 텍스트에 tspans 세트를 추가하고 싶지만 실행 순서를 너무 많이하여 그것을 어디에 넣어야할지 고민하고있다.

코드 : https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm

데이터 : https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.json

내가 하나가 그것을 깨는 tspans 또는 내부의 텍스트 사업부를 필요로하지만 중 하나를 수행하는 방법을 모르는 연구했습니다. 일반 D3 Treemap에 대한 텍스트 줄 바꿈의 예가 있지만 Zoomable Treemap에 대해 아무 것도 찾지 못했고 코드가 크게 다릅니다.

Answer 1

가장 쉬운 방법은 SVG text 요소를 div의 foreignObject으로 대체하는 것입니다. 당신은 또한 당신이 있는지 여부를 확인하는 데 사용하는 것과 유사한 foreignObject (사용하여 코드의 width 및 height 속성을 설정하는 것이 좋습니다 수 있습니다

g.append("text") //was text 
.attr("dy", ".75em") 
... 

g.append("foreignObject") 
.attr("dy", ".75em") 
... 
.append("xhtml:div") 
... 

로 대체 할 것이다, 그렇게하려면 텍스트가 너무 길어서 텍스트가 올바르게 흐른다.