Why The Value For R Is Negative From D3.hierarchy In Circle Packing In D3.js?

I'm using https://observablehq.com/@d3/zoomable-circle-packing as an example to try d3 and circle packing in angular. I have the data which seems to be hierarchical and I'm followi

Solution 1:

You have 2 problems:

1. Your data structure is incorrect, you have objects as the value of your children properties. They should be arrays.

2. You are setting the SVG viewBox, not its width. Therefore, this...

   this.diameter = +this.svg.attr("width")
   

   ...is just +null, which is 0. Because of that, the array in the size() method will have negative values, which explains your main issue. Use your width and height instead.

Here is the forked code: https://stackblitz.com/edit/angular-circle-packing-uyigxs?file=src/app/app.component.ts