CODEWITHSUNDEEP
d3.js
lostdorje
lostdorje

Reputation: 6460

how to adjust parent circle radius using d3js pack layout

Is it possible to adjust a parent circle's size independent of the children it contains using d3js pack layout?

I'm using the d3js pack layout to show a hierarchy of circles. Each circle represents a sales group. Circles nested within are child sales groups. Each group has a total amount of sales which is represented by circle radius. Every group, including parents can have their own sales amount.

I realize that the proportions might not be exact, but I'd like to adjust the parent circle's radius as well to indicate that the parent group had sales of its own.

I am currently setting the parent size indepedent of the children, but this seems to be ignored as the parent radius is dictated by the children it contains.

Is it possible to adjust parent radius in pack layout?

I did see this similar question:

D3JS packed circle layout, padding in relation to parent

But it didn't have a definitive answer.

Upvotes: 2

Views: 1343

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The positions and radii of the circles are computed and returned by the pack.nodes() function. Usually, you would give this directly to a .data() function and then draw elements based on it, but there's nothing stopping you from changing the return value. Each element of the return value of pack.nodes() has an attribute parent that will be null if it's the top-level circle and an attribute r that determines the radius.

The easiest way to achieve what you want is to simply change the radius of the top-level circle in what the pack layout returns. That is, iterate over the array of nodes and change the radius if parent is null.

Upvotes: 2

Related Questions