[英]d3 Pie chart won't rerender
I've got a pie chart and it will only draw once. 我有一个饼图,它只会绘制一次。 I got it from Mike Bostock's pie chart example .
我是从Mike Bostock的饼图示例中得到的 。 I'm new to D3 and I can't figure out why it won't redraw.
我是D3的新手,我不知道为什么它不会重绘。 I saw this post about redrawing a bar chart, but for some reason that technique doesn't work on my pie chart.
我看到这个帖子关于重绘条形图,但由于某些原因,技术不我饼图上工作。 I'm sure I'm doing something wrong.
我确定我做错了什么。
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.percent; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
function drawChart(error, data) {
console.log("here");
data.forEach(function(d) {
d.percent = +d.percent;
});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
console.log("inside path");
return d.data.color;
});
g.append("text")
.attr("transform", function(d) { console.log("inside transform", d);return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.color; });
}
drawChart(undefined, [{"color": "green", "percent": 50}, {"color": "red", "percent": 50}]);
setTimeout(function () {
drawChart(undefined, [{"color": "green", "percent": 75}, {"color": "red", "percent": 25}]);
}, 1000)
Problem 1: 问题一:
You are adding the d attribute to the DOM g which is wrong. 您正在将d属性添加到DOM g,这是错误的。
<g class="arc" d="M-240,2.939152317953648e-14A240,240 0 0,1 -4.408728476930471e-14,-240L0,0Z">
<path d="M-9.188564877424678e-14,240A240,240 0 1,1 1.6907553595872533e-13,-240L0,0Z" style="fill: red;">
</path>
<text transform="translate(-120,-9.188564877424678e-14)" dy=".35em" style="text-anchor: middle;">red</text>
</g>
d attribute is only for path not for g. d属性仅适用于路径,不适用于g。
So this line is incorrect 所以这行是不正确的
g.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
Problem 2: 问题2:
Your update function is incorrect(same reason problem 1) 您的更新功能不正确(原因相同的问题1)
function update (data) {
console.log("here", data);
var value = this.value;
g = g.data(pie(data)); // compute the new angles
g.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
};
In my opinion you should call your drawChart
function again for update. 我认为您应该再次调用
drawChart
函数进行更新。 with an exception that you remove old g group like this. 除了您删除像这样的旧g组。
svg.selectAll(".arc").remove();
The advantage is that we are using the same code for create and update (DRY). 好处是我们使用相同的代码进行创建和更新(DRY)。 So your timeout function becomes like thsi
所以您的超时功能变得像
setTimeout(function () {
drawChart(undefined, [{"color": "green", "percent": 75}, {"color": "red", "percent": 25}]);
}, 2000);
Full working code here 完整的工作代码在这里
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.