时间戳

首页 > 解决方案 > 使用 d3pie.js 饼图更新数据时出错

javascript - 使用 d3pie.js 饼图更新数据时出错

问题描述

我正在尝试从 d3pie.js 库更新饼图，但是我必须缺少一些基本的东西。

我有两个对我来说看起来相同的脚本，唯一的区别是更新是通过按下按钮进行的​​，而另一个是在页面加载时动态进行的。第二个脚本也有错误Uncaught TypeError: Cannot read property 'value' of undefined。我确实得到了一张图表，它只是错误的；不是 2 片，而是 3 片（2 片颜色相同）。该pullOutSegment事件也不起作用，所以饼图确实搞砸了。该pie对象看起来不同，也许这就是第二个脚本失败的原因，但我不知道要得到正确的。从昨天开始，它就一直在我的脑海里。脚本包含在下面，第一个是工作代码，第二个是失败的代码。

任何帮助都非常感谢！

<html>
<head></head>
<body>

<input type="button"; value="Add Data"; id="addData" />
<div id="pie"></div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>



<script>
function piechartData() {
    var data = [
        {label: "1", value: 1},
        {label: "2", value: 4},
        {label: "3", value: 3}
    ];

    var pie = new d3pie("pie", {
        data: {
            content: data
        }
    });

    return pie
};
</script>

<script>


    // create a piechart
    pie = piechartData();

    $(function() {

        //clear the data
        data = [];
        $("#addData").on("click", function() {

            //when button pressed push these and update the piechart
            data.push({"label": "4", "value": 8});
            data.push({"label": "51", "value": 3});;

            pie.updateProp("data.content", data);
        });
    });

</script>



</body>
</html>

<html>
<head></head>
<body>

<div id="pie"></div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>

<script>
    function piechartData() {
        var data = [
            {label: "1", value: 1},
            {label: "2", value: 4},
            {label: "3", value: 3}
        ];

        var pie = new d3pie("pie", {
            data: {
                content: data
            }
        });

        return pie
    };
</script>

<script>

    // make a piechart
    pie = piechartData();

    //create new data and update the piechart
    data = [];
    data.push({"label": "4", "value": 8});
    data.push({"label": "51", "value": 3});

    pie.updateProp("data.content", data);



</script>


</body>
</html>

标签： javascriptd3.jsd3pie.js

解决方案

第二个示例清除了 svg ( updateProp) 的内容，但不是所有的转换。他们仍然住在 d3 里面。

如果你等到初始动画完成

setTimeout(() => {
    data = [];
    data.push({"label": "4", "value": 8});
    data.push({"label": "51", "value": 3});

    pie.updateProp("data.content", data);
}, 5000);

这一切都有效。

我不知道当 d3pie 完成所有动画时是否有一种简单的方法来获取回调。

推荐阅读