如何使用 D3 从具有多个对象的单个数组创建多个饼图？答案

【问题标题】：How to create multiple pie charts with D3 from a single array with multiple objects?如何使用 D3 从具有多个对象的单个数组创建多个饼图？
【发布时间】：2021-10-09 02:20:08
【问题描述】：

我正在学习如何使用 D3.js，并且我正在尝试从我从外部 API 获取的 JSON 数据中呈现多个饼图。我正在使用的数据如下所示

tickers = [{
    "symbol": "GME",
    "buy": 0,
    "hold": 3,
    "period": "2021-08-01",
    "sell": 5,
    "strongBuy": 0,
    "strongSell": 2
}, {
    "symbol": "AMD",
    "buy": 21,
    "hold": 16,
    "period": "2021-08-01",
    "sell": 1,
    "strongBuy": 8,
    "strongSell": 0
}]

我正在尝试为数组中的每个对象呈现一个饼图，但我似乎无法将数据正确地流向我的饼图。我只想要每个饼图上的“强力卖出”、“卖出”、“持有”、“买入”和“强力买入”信息。

我尝试了以下代码，并附上了显示 HTML 和饼图的屏幕截图

    var margin = 20, width = 250, height = 250
    var radius = Math.min(width, height) / 2 - margin

    var new_data = tickers.map(function(d){
        if (d){
            var temp = {"Strong Sell": d.strongSell, "Sell": d.sell, "Hold": d.hold, "Buy": d.buy, "Strong Buy": d.strongBuy}
        } else {
            var temp = {"Strong Sell": 0, "Sell": 0, "Hold": 0, "Buy": 0, "Strong Buy": 0}
        }
        return temp
    })

    var color = d3.scaleOrdinal()
        .domain(["Strong Sell", "Sell", "Hold", "Buy", "Strong Buy"])
        .range(["#570e00", "#ff2a00", "#ffff00", "#00ff08", "#00570c"])

    var pie = d3.pie()
        .value(function(d) {return d.value; })

    var data_ready = pie(d3.entries(new_data))

    var recommendSvg = d3.selectAll(".company-recommend")
        .append("svg")
            .attr("width", width)
            .attr("height", height)
        .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    recommendSvg
        .selectAll('g')
        .data(data_ready)
        .enter()
        .append('path')
            .attr('d', d3.arc()
                .innerRadius(0)
                .outerRadius(radius)
            )
            .attr('fill', function(d){ return(color(d.data.key)) })
            .attr("stroke", "black")
            .style("stroke-width", "2px")
            .style("opacity", 0.7)

任何帮助或建议将不胜感激！

Locations where I want pie charts to show

HTML in the console

【问题讨论】：

标签： javascript d3.js charts pie-chart

【解决方案1】：

这是一个完整的示例，假设“公司推荐”的 div 已经创建。

我已经修改了您的代码，因此您不需要使用d3.entries。我从一开始就以这种格式放置数据。此外，我还更新了recommendSvg，以便将data 数组绑定到它。这意味着每个 div 都绑定到 data 数组中的一个元素。当在每一组中绘制饼图时，我们将该图表的数据传递给pie 生成器，并为每个切片创建一个路径。

<html>
    <head>
        <script src="https://d3js.org/d3.v7.min.js"></script>
    </head>
    
    <body>
        <div class="company-container">
            <div class="company-profile"></div>
            <div class="company-recommend"></div>
        </div>

        <div class="company-container">
            <div class="company-profile"></div>
            <div class="company-recommend"></div>
        </div>

        <script>
            const tickers = [
                {
                    "symbol": "GME",
                    "buy": 0,
                    "hold": 3,
                    "period": "2021-08-01",
                    "sell": 5,
                    "strongBuy": 0,
                    "strongSell": 2
                },
                {
                    "symbol": "AMD",
                    "buy": 21,
                    "hold": 16,
                    "period": "2021-08-01",
                    "sell": 1,
                    "strongBuy": 8,
                    "strongSell": 0
                }
            ];

            const margin = 20;
            const width = 250;
            const height = 250;
            const radius = Math.min(width, height) / 2 - margin;

            const data = tickers.map(d => [
                { key: 'Strong Sell', value: d.strongSell },
                { key: 'Sell', value: d.sell },
                { key: 'Hold', value: d.hold },
                { key: 'Buy', value: d.buy },
                { key: 'Strong Buy', value: d.strongBuy },
            ]);

            const color = d3.scaleOrdinal()
                .domain(["Strong Sell", "Sell", "Hold", "Buy", "Strong Buy"])
                .range(["#570e00", "#ff2a00", "#ffff00", "#00ff08", "#00570c"]);

            const pie = d3.pie().value(d => d.value);

            const arc = d3.arc()
                .innerRadius(0)
                .outerRadius(radius);

            // bind our data to the divs. add a group to each div.
            const recommendSvg = d3.selectAll('.company-recommend')
                .data(data)
                .append('svg')
                    .attr('width', width)
                    .attr('height', height)
                .append('g')
                    .attr('transform', `translate(${width / 2},${height / 2})`);

            // draw the pie chart in each group
            // by creating one path for each slice
            recommendSvg.selectAll('path')
                .data(d => pie(d))
                .join('path')
                    .attr('d', arc)
                    .attr('fill', d => color(d.data.key))
                    .attr('stroke', 'black')
                    .attr('stroke-width', '2px')
                    .attr('opacity', 0.7);
        </script>
    </body>
</html>

【讨论】：

非常感谢您的回复，效果很好。我将不得不阅读更多关于如何像你在那里那样绑定数据的内容。再次感谢！
嗨，Dan，我遇到了另一个问题来显示一些 D3 线图，请您看看我下面的新问题，并提供您在 D3 方面的专业知识吗？ stackoverflow.com/questions/68779019/…