D3 实时饼图不更新？

Question

我对 Javascript 编程比较陌生，所以对于任何新手，我深表歉意。

我正在尝试使用 csv 中的数据实时更新饼图，但图表更新出现问题。

数据来自注册表，我想计算某个字段的实例数。我在我的脚本中准备数据如下：

    function loadData(){
        d3.csv("/data.csv",function(data){
            temparr=[];
            count = data.length;
            var positions={};
            data.forEach(function(d) {
                if(!positions[d.POSITION])
                {
                    positions[d.POSITION] = 1;
                }
                else 
                {
                    positions[d.POSITION] = positions[d.POSITION] + 1;
                }
            });
            Object.keys(positions).forEach(function(prop){
                var tempobj={};
                tempobj["position"]=prop;
                tempobj["value"] = positions[prop];
                if(positions[prop] < min){min=positions[prop]}
                if(positions[prop] > max){max=positions[prop]}
                temparr.push(tempobj);
            });
            barData=temparr;
});
}

我正在更新的图表是通过附加到我正文中的 SVG 元素来创建的：

            var g=chart.append("g").attr("transform","translate("+width/2+","+height/2+")");

            arc = g.selectAll(".arc");

            var temp = arc.data(pie(barData))
            .enter().append("g")
            .attr("class","arc");

            temp.append("path")
            .attr("d",path)
            .attr("fill",function(d){return color(d.data.position);});

然后我使用以下方法更新它：

        arc.data(pie(barData));

        var temp = arc.enter().append("g")
        .attr("class","arc");

        arc.exit().remove();

        temp.append("path")
        .attr("d",path)
        .attr("fill",function(d){return color(d.data.position);});

但是在我更改数据后，什么也没有发生。谁能告诉我我错过了什么？谢谢。

Answer 1

函数enter() 仅返回正在进入选择的新项目。但是第二次，您没有输入新项目 - 您只是在更新现有数据。因此，分配给变量temp 的enter() 的结果是空的，并且没有任何现有项目的d 或fill 发生更改。

如果您更改更新代码的最后几行以首先选择所有弧线，包括现有弧线和新弧线，如下所示，它应该（我希望）更新路径和颜色：

g.selectAll(".arc path")
    .attr("d", path)
    .attr("fill",function(d){return color(d.data.position);});