Question

我知道这个问题已经问过很多次了，但是我无法解决更新饼图的问题。我完全迷路了。您能告诉我这里的问题是什么吗？

我尝试了以下方法，但是图表似乎没有更新。我添加了应该更新图表的功能更改。我正在更新数据，重画弧线并更改标签，但是它不起作用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Load D3 -->
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="pie"></div>
    <script>
        var dataChart = { a: 9, b: 20, c: 30, d: 8, e: 12 };
        var dataChart2 = { f: 9, g: 20, h: 30, i: 8 };
        console.log(dataChart);

        var width = 300,
            height = 300,
            // Think back to 5th grade. Radius is 1/2 of the diameter. What is the limiting factor on the diameter? Width or height, whichever is smaller
            radius = Math.min(width, height) / 2;

        var color = d3.scaleOrdinal()
            .range(["#2C93E8", "#838690", "#F56C4E"]);

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

        data = pie(d3.entries(dataChart));

        var arc = d3.arc()
            .outerRadius(radius - 10)
            .innerRadius(0);

        var labelArc = d3.arc()
            .outerRadius(radius - 40)
            .innerRadius(radius - 40);


        var svg = d3.select("#pie")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // Moving the center point. 1/2 the width and 1/2 the height

        var g = svg.selectAll("arc")
            .data(data)
            .enter().append("g")
            .attr("class", "arc");

        g.append("path")
            .attr("d", arc)
            .style("fill", function (d) { return color(d.data.key); });


        g.append("text")
            .attr("transform", function (d) { return "translate(" + labelArc.centroid(d) + ")"; })
            .text(function (d) { return d.data.key; })
            .style("fill", "#fff");

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

            data = pie(d3.entries(dataChart));
            path = d3.select("#pie").selectAll("path").data(data); // Compute the new angles
            path.attr("d", arc); // redrawing the path
            d3.selectAll("text").data(data).attr("transform", function (d) { return "translate(" + labelArc.centroid(d) + ")"; }); // recomputing the centroid and translating the text accordingly.
        }
       // calling the update functions
        change(dataChart);
        change (dataChart2);
    </script>


</body>

</html>

饼图未更新D3.JS

0 个答案: