2

我正在尝试在 d3.js 上设置一个饼图，它将不断更新其数据（切片）并更改标签。数据切片可能会有所不同并且不是恒定的（可能是 2 切片饼图和 5 切片等）

我回顾了几个例子，例如：

http://jsfiddle.net/emepyc/VYud2/3/

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）您的帮助将不胜感激！

4

1 回答 1

4

你快到了。关键是将文本与路径完全相同，并.exit()通过删除它来处理选择。我在这里修改了你的 jsfiddle 。我删除了g元素以使其更容易理解。

于 2013-06-20T21:30:02.303 回答