Question

我试图在D3 v5中使用.pack()来绘制气泡图。我关注的教程已经过时，并使用了不再受支持的v3 API。

我在渲染节点部分时陷入困境，

这是我的数据获取代码：

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})`)

这是我的泡泡：

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

这是我要呈现的数据的子集：

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

我的浏览器没有显示任何错误，并且svg容器为空。我的猜测是我没有将正确的数据结构输入d3.hierarchy()中，但是在进行一些在线挖掘之后，我只能拿出上面的代码，该代码不会产生错误，也不会产生图表。

Answer 1

根据您的代码为您创建了这个完全可用的示例。希望能帮助到你！：）

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)
    })

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

1 个答案: