Question

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

我已经回顾了几个例子：

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）非常感谢您的帮助！

Answer 1

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

d3.js：使用标签更新饼图

1 个答案: