d3.js dendrogram葉子呈現爲鍵值對

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

渲染，大到桌上的東西可能是難以實現的空間，明智的。最簡單的方法是追加一個foreignObject element而不是text元素，然後創建一個包含需要顯示的數據的HTML table。

有關如何使用foreignObject的示例，請參閱here。您也可以找到this tutorial有助於創建實際表格。