Possible to use a circle pack layout in d3.js with fixed circle sizes?

Question

This circle pack layout example (http://bl.ocks.org/4063269) is perfect for a project I'm working on, however it sizes all the circles relative to one another:

Is there a simple way to specify fixed radii for each circle?

I've scoured the source code, examples, google, and stackoverflow and can't seem to find anything helpful.

The exact sizing of circles is important to me.

Cingulum

user2058412, can you please take a look at my answer? Is it useful to you? – Sanfo

Answer 1

It is possible, and simple thing to do. The first answer is accurate, but I believe mine is simpler, more explicit, so I am attaching it too.

Please take a look at this example: jsfiddle

When you press "Constant" button, you will see something like this:

The key code line is this:

    pack.value(function(d) { return 100; })

This will make circle radiuses constant regardles of data. 100 can be any constant of course. You can apply this line in circle pack initialization (most likely this will be your case), or reinitialization (like in my example).

Hope this helps.

Sanfo

Answer 2

If you follow the code in the example you gave, the size of the <circle> elements is being decided here:

node.append("circle")
  .attr("r", function(d) { return d.r; })
// ...

To fix the size of circles to, say, 50, you can do this:

node.append("circle")
  .attr("r", function(d) { return 50; })
// ...

---

Update

This will, however, break the layout as pointed out in the comment. To fix that, one can provide the same value to each node:

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  return {children: classes};
}

to:

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: 1});
  }

  recurse(null, root);
  return {children: classes};
}

Jaqitsch

Thanks for replying! I actually tried that, but it breaks the layout: cl.ly/image/2M3o1T2n2k1V . The way it should look is: cl.ly/image/1U1b3v3m152W – Cingulum

Updated the answer with a possible fix. – Jaqitsch