javascript - D3js：绘制没有最外圈的包布局

Question

我正在尝试在没有最外层变量的 d3.js 中绘制包布局。我想绘制一个没有最外层父圆的包布局。有什么办法吗？

Answer 1

就在这里。我建议采用以下方法：您将所有圆包初始化保持不变。您只需更改将圆圈实际附加到 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 可用here）

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

根节点将消失：

如果添加这一行：

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

除了离开节点（换句话说，没有子节点的节点）之外的所有节点都将消失：

而且，稍微复杂一点，这条线

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

将使根父圆及其所有直接子圆消失：