D3js：繪圖包布局不包含最外面的圓

Question

我正在嘗試在d3.js中繪制沒有最外層變量的包布局。 我想繪制一個沒有最外面的父圓的背包布局。 有什么辦法嗎？

Answer 1

就在這里。 我建議采用以下方法：完整保留所有Circle Pack初始化。 您只需更改將圓環實際附加到DOM / SVG樹的代碼點。 我將在幾個示例中對此進行展示。 此jsfiddle是“常規”圈子包的示例：

負責將圓添加到DOM樹的關鍵代碼是這樣的：

var circles = vis.append("circle")
    .attr("stroke", "black")
    .style("fill", function(d) { return !d.children ? "tan" : "beige"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; });

如果只是在“ vis”和“ .append（” circle“）”之間添加這一行：（ 此處提供另一種jsfiddle）

.filter(function(d){ return d.parent; })

根節點將消失：

如果添加此行：

.filter(function(d){ return !d.children; })

除離開節點（換句話說，沒有子節點）以外的所有節點都將消失：

而且，稍微復雜一點

.filter(function(d){ return (d.depth > 1); })

將使根父圓及其所有直接子圓消失：