d3pie.js 饼图的数据更新错误
error on data update with a d3pie.js piechart
我正在尝试更新 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完成所有动画后得到回调。
我正在尝试更新 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完成所有动画后得到回调。