代码之家 › 专栏 › 技术社区 › Aenaon

使用d3更新数据时出错派.js圆瓣图

d3pie.js d3.js javascript

Aenaon · 技术社区 · 7 年前

我有两个脚本,看起来一样,唯一的区别是,更新发生在一个按钮按下,而在另一个发生在飞行,而页面加载了。第二个脚本也有错误 Uncaught TypeError: Cannot read property 'value' of undefined . 我得到了一个图表,它只是一个错误的;而不是2片,得到3(2相同的颜色)。这个 pullOutSegment 事件也不起作用,所以piechart确实出了问题。这个 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>

1 回复 | 直到 7 年前

rioV8 7 年前

第二个示例清除svg的内容( updateProp

如果等到初始动画完成

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

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

一切正常。

我不知道是否有一个简单的方法,以获得回调时,d3pie完成了所有的动画。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

10 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

10 月前

Alex · 在轻量级中同时解构和不解构变量

11 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

11 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

user3472810 · Angular@Output/EventEmitter返回undefined

11 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

11 月前