我正在尝试从 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>最佳答案
第二个示例清除 svg 的内容 (updateProp)，但不清除所有过渡。他们仍然住在 d3 内。
如果您等到初始动画完成
setTimeout(() => {
data = [];
data.push({"label": "4", "value": 8});
data.push({"label": "51", "value": 3});
pie.updateProp("data.content", data);
}, 5000);
一切正常。
我不知道是否有一种简单的方法可以在 d3pie 完成所有动画时获得回调。
关于javascript - 使用 d3pie.js 饼图更新数据时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52296737/