d3.js：用lables更新饼图

我试图在d3.js上建立一个饼图，它会不断更新其数据（切片）并更改标签。数据的切片可能会发生变化，并且不恒定（可以是2片派和5片等）d3.js：用lables更新饼图

我们已审查过的几个例子，如：

http://bl.ocks.org/mbostock/3808218

但事情是，我的实现是非常不同的，因为我使用文本标签和路径。

问题：数据未更新且文本未被删除。

这里是我的代码：http://jsfiddle.net/Kitt0s/vfkSs/

function tests (data) { 
     data = data ? data : { "slice1": Math.floor((Math.random()*10)+1), "slice2": Math.floor((Math.random()*10)+1), "slice3": Math.floor((Math.random()*10)+1), "slice4": Math.floor((Math.random()*10)+1) }; 
      var dataa = d3.entries(data); 
      var cv_path = cv_svg.selectAll("g.slice") 
       .data(cv_pie(dataa)); 

      cv_path.enter() 
       .append("g") 
       .attr("class", "slice") 
       .append("path") 
       .attr("fill", function(d, i) { return cv_color(i); }) 
       .attr("d", cv_arc) 
       .each(function(d) { this._current = d; }); 

      cv_path.transition().duration(750).attrTween("d", cv_arcTween); 

      cv_path.exit().remove(); 

      var cv_text = d3.selectAll(".slice") 
       .append("text") 
       .attr("transform", function(d) { 
        d.innerRadius = 0; 
        d.outerRadius = cv_r; 
        return "translate(" + cv_arc.centroid(d) + ")"; 
       }) 
       .attr("text-anchor", "middle") 
       .attr("font-weight", "bold") 
       .attr("fill", "#FFFFFF") 
       .attr("font-size", "30px") 
       .text(function(d) { return d.data.key + "(" + d.data.value + ")"; }); 

       cv_text.exit().remove(); 
}

我花非常多的时间试图获得这项权利，但似乎仍然卡住（每次别的东西休息..：P）您的帮助将不胜感激！

来源

2013-06-20 natiz

你几乎在那里。关键是要处理文本完全相同的路径和处理.exit()选择通过删除它。我修改了你的jsfiddle here。我已经删除了g元素，使其更容易理解。

来源

2013-06-20 21:30:02

非常感谢！我想g元素令我感到困惑......它很棒！但是有一件事，文本没有更新，所以我所做的是将文本更新功能放在.enter（）函数的外面。这是最后一个：http://jsfiddle.net/vfkSs/2/再次感谢！ – natiz

d3.js：用lables更新饼图

回答

相关问题