Controlling order of circles in D3 circle pack layout algorithm

Kaster Published at Dev

Kaster

I was wondering if it's possible to slightly change packing algorithm in d3.layout. Namely, I'd like to know if instead of putting a child node with highest value at the position where it touches parent node one can put it in the middle of it. Right now it looks like all children go by spiral with smallest child deep inside of the parent.

I hope it's not too confusing. I'll gladly clarify whatever is unclear.

VividD

It is possible.

You only need to replace this code in d3.js:

  function d3_layout_packSort(a, b) {
    return a.value - b.value;
  }

with this code:

  function d3_layout_packSort(a, b) {
    return -(a.value - b.value);
  }

(just a change of sign)

Largest circles will not be at the very center of the parent, however they will tend to be close to the center. My understanding is that you don't need exact placement at the center, just approximate, so I hope this will satisfy your idea.

Following picture illustrates circular pack example obtained with regular and modified d3.js, side-by-side:

Regular and modified packing

I a kind of tend to like modified packing more. :) So I guess it was a good idea. Check how it looks with your data.

You can access these examples here: regular, modified.

My modified d3.js is here.

Let me know if you have additional questions.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-5

Comments

0 comments

From Dev

Related Related

Article