javascript - D3js : Draw pack layout without the outermost circle

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; })

除了离开节点(换句话说，没有 child 的节点)之外的所有节点都将消失:

而且，稍微复杂一点，这一行

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

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