包裝佈局中葉子節點的不同形狀/圖像

Question

我在d3.js（https://github.com/mbostock/d3/wiki/Pack-Layout）中使用包裝佈局並使用父子結構加載json文件。

我的問題可能是一個很平凡的一個：我想追加取決於是否d.children回報parent或child圓或圖像（或者矩形）（其中兒童基本上是葉節點）。

這是一個位是追加圈到所有節點的代碼：

vis.selectAll("circle") 
    .data(nodes) 
.enter().append("svg:circle") 
    .attr("class", function(d) { return d.children ? "parent" : "child"; }) 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", function(d) { return d.r; }); 

有沒有人有什麼建議？ 謝謝

Answer 1

使用過濾功能：

// if you have children, append a circle 
node.filter(function(d){ 
    return d.children; 
}) 
.append("circle") 
.attr("r", function(d) { return d.r; }); 

// if you don't have children, append a rect 
node.filter(function(d){ 
    return !d.children; 
}) 
.append("rect") 
.attr("width", function(d) { return d.r; }) 
.attr("height", function(d) { return d.r; }) 
.attr("x", function(d) { return -d.r/2; }) 
.attr("y", function(d) { return -d.r/2; }); 

例here。