使用d3pie.js饼图进行数据更新时出错
[英]error on data update with a d3pie.js piechart
问题描述
我正在尝试从d3pie.js库更新一个饼图，但是必须缺少一些基本的东西。
我有两个对我来说看起来相同的脚本，唯一的区别是更新是通过按下按钮进行的，而另一个是在页面加载时进行的。 我也遇到了第二个脚本Uncaught TypeError: Cannot read property 'value' of undefined的错误Uncaught TypeError: Cannot read property 'value' of undefined 。 我确实得到一张图表，那是错误的图表； 代替2片，得到3（2个具有相同的颜色）。 pullOutSegment事件也不起作用，因此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>
1 个解决方案
解决方案1
1 已采纳 2018-09-12 15:37:16
第二个示例清除svg（ updateProp ）的内容，但不清除所有转换。 他们仍然住在d3内部。
如果您等到初始动画完成后
setTimeout(() => {
data = [];
data.push({"label": "4", "value": 8});
data.push({"label": "51", "value": 3});
pie.updateProp("data.content", data);
}, 5000);
一切正常。
我不知道在所有动画d3pie完成后是否有一种简单的方法来获取回调。
d3pie错误：d3pie.js上没有提供数据
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.