Question

我对Javascript编程比较陌生，所以我为任何noobiness道歉。

我正在尝试使用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()仅返回进入选择的新项目。但第二次，您没有新项目进入 - 您只是更新现有数据。因此，enter()的结果（已分配给变量temp）为空，并且现有项目均未更改d或fill。

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

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

D3实时饼图没有更新？

1 个答案: