d3.js 키 - 값 쌍으로 렌더링 된 나뭇잎을 가진 덤 드로 그램

Question

d3.js로 작업하고 계층 적 데이터를 가지고이 예제로 거의 내 요구를 충족시키는이 d3 dendrogram으로 작업하지만 리프로 텍스트 문자열 대신 표를 표시하십시오. 나는 잎이 같은 것을 렌더링하고 싶습니다

{"name": "root", 
"children": [ 
    {"name": "dtable", 
    "children": [ 
    {"label": "la01", "tag":"section", "title":"Section One"} 
    {"label": "la02", "tag":"section", "title":"Section Two"} 
    {"label": "la0201", "tag":"subsection", "title":"Subsection Two:One"} 
    ] 
    } 
} 

:

---------------------------------------------- 
| label | tag  | title    | 
---------------------------------------------- 
| la01  | section | Section One  | 
| la02  | section | Section Two  | 
| la0201 | subsection | Subsection Two:One | 
---------------------------------------------- 

D3의 예는 텍스트 문자열로 잎을 표시이 조각을 가지고 데이터는이 패턴을 따른다. 내가 대신 테이블을 표시하도록 코드를 재 설계하거나 교체하는 방법에 대한 손실에 있어요 : 공간 현명한 달성하기 어려울 수 있습니다 테이블로 큰 무언가를 렌더링

nodeEnter.append("svg:text") 
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
    .attr("dy", ".35em") 
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
    .text(function(d) { return d.name; }) 
    .style("fill-opacity", 1e-6); 

Answer 1

. 가장 쉬운 방법은 text 요소 대신 foreignObject element을 추가 한 다음 표시해야하는 데이터가 포함 된 table이라는 HTML을 만드는 것입니다.

foreignObject을 사용하는 방법의 예는 here을 참조하십시오. 실제 테이블을 만드는 데 도움이되는 this tutorial을 찾을 수도 있습니다.