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

Question

我正在尝试在没有最外层变量的d3.js中绘制包布局。 我想绘制一个没有最外面的父圆圈的包布局。有没有办法做到这一点？

Answer 1

是的，有。我建议采用以下方法：保持所有循环包初始化完好无损。您只需更改实际将圆圈附加到DOM / SVG树的代码点。我将在几个例子中展示这一点。这个jsfiddle是＆＃34;常规＆＃34;的一个例子。圈包：

负责向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; });

如果只在＆＃34; vis＆＃34;之间添加这一行。和＆＃34; .append（＆＃34; circle＆＃34;）＆＃34; :(另一个jsfiddle可用here）

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

根节点将消失：

如果添加此行：

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

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

而且，有点复杂，这一行

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

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