D3js: Draw pack layout without the outermost circle

Question

I am trying to draw a pack layout in d3.js without outermost variable. I want to draw a pack layout without outer most parent circle. Is there any way to do it?

Answer 1

Yes, there is. I would suggest following approach: you leave all circle pack initialization intact. You only change the point of code where circles are actually appended to DOM/SVG tree. I'll show this in a couple of examples. This jsfiddle is an example of "regular" circle pack:

The key code responsible for adding circles to the DOM tree is this:

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

If one adds just this line between "vis" and ".append("circle")": (another jsfiddle available here )

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

the root node will disappear:

If one adds this line:

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

all nodes except leave nodes (in other words, those without children) will disappear:

And, a little bit more complex, this line

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

will make the root parent circle and all its direct children disappear: