D3.hierarchy not giving x,y,r

Programming
, , ,
1

which I already installed.

I am trying to create a bubble plot in d3, but the nodes object does not contain x, y or r values.

This is the code I am using:

dataset = {
    "children": [
      {
        "children": [
          { "Name": "Olives", "Count": 4319 },
          { "Name": "Tea", "Count": 4159 },
          { "Name": "Mashed Potatoes", "Count": 2583 },
          { "Name": "Boiled Potatoes", "Count": 2074 },
          { "Name": "Milk", "Count": 1894 },
          { "Name": "Chicken Salad", "Count": 1809 },
          { "Name": "Vanilla Ice Cream", "Count": 1713 },
          { "Name": "Cocoa", "Count": 1636 },
          { "Name": "Lettuce Salad", "Count": 1566 }
        ]
      }
    ]
  };

  renderChart() {
    let diameter = 600;
    let height = 400;
    let width = 600;
    let width2 = 200;
    let color = d3.scaleOrdinal(d3.schemeCategory10);

    let bubble = d3.pack()
      .size([width, height])
      .padding(1.5);

    let svg = d3.select('#chart')
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bubble");

    let nodes = d3.hierarchy(this.dataset)
      .sum(function (d: any) {
        return d.Count;
      });
   }

I am using d3 library versions 5.5.0 and 7.4.0.

What could be causing the issue and how can I debug it?

2

The issue you are facing is that the nodes object does not contain x, y, or r values. This is because you are missing the step where you generate the x, y, and r values for each node in the nodes object.

To fix this issue, you need to call the bubble function on the nodes object to generate the x, y, and r values. Here is the updated code:

renderChart() {
  // ...

  let nodes = d3.hierarchy(this.dataset)
    .sum(function (d: any) {
      return d.Count;
    });

  let root = bubble(nodes); // Generate x, y, and r values

  // ...

}

By calling bubble(nodes), you pass the nodes object to the bubble function, which then generates the x, y, and r values for each node in the hierarchy.

Make sure to include this step after creating the nodes object to fix the issue.