使用Pack的D3 v5气泡图未呈现

Question

I am trying to render a bubble chart using .pack() in D3 v5. The tutorial I'm following is outdated and uses v3 APIs which are no longer supported.

I got stuck in rendering the nodes part,

This is my data fetch code:

d3.json('/data').then((quotes) => {
    const root = d3.hierarchy(quotes).sum(d => Number(d.price));
    bubble(root);
    const node = svg.selectAll('.node')
      .data(root.descendants())
      .filter(d => !d.children)
      .enter().append('g')
      .attr('class', 'node')
      .each(function (d) { d.node = this })
      .attr('transform', d => `translate(${d.x}, ${d.y})`)

This is my bubble:

//declare layout
  const bubble = d3.pack()
    .size([width, height])
    .padding(1)
    .radius((d) => 20 + (sizeOfRadius(d) * 30))

And this is a subset of the data I'm trying to render:

children: [
{
name: "Activision Blizzard Inc",
net_change: "-0.65",
percent_change: "-1.36",
price: "47.1",
symbol: "ATVI",
value: "-.4",
volume: "9458326"
},
]

My browser isn't showing any error and the svg container is empty. My guess is that I'm not feeding the correct structure of data into d3.hierarchy() but after some digging online, I was only able to come up with the above code which produces no error and no chart.

Answer 1

Created this fully working example for you, based on your code. Hope it helps! :)

const width = window.innerWidth
    const height = window.innerHeight
    const svg = d3.select("svg")

    d3.json('/data.json').then((quotes) => {
        var maxValue = d3.max(d3.entries(quotes.children).map(x => x.value.price))
        var minValue = d3.min(d3.entries(quotes.children).map(x => x.value.price))

        var scale = d3.scaleLinear().domain([minValue, maxValue]).range([5, 20])

        svg
            .attr("width", width)
            .attr("height", height)

        //declare layout
        const bubble = d3.pack()
            .size([width, height])
            .padding(5)
            .radius((d) => {
                return scale(d.data.price)
            })


        const root = d3.hierarchy(quotes)
        bubble(root);

        const node = svg.selectAll('.node')
            .data(root.descendants())
            //.filter(d => !d.children)
            .enter()
            .append('g')
            .attr('class', (d) => {
                if (d.depth === 0) return "node top"
                else return "node"
            })
            // .each(function (d) { d.node = this })
            .style('transform', d => `translate(${d.x}px, ${d.y}px)`)
            .append("circle")
            .attr("r", (d) => d.r)
    })