Question

我有一个饼图，它从一组数字中获取数据。这些数字会根据用户的某些控件动态更改。无论如何，我在data2旁边创建了第二个数组data。

我尝试过一些解决方案：使用arcTween或只是利用我所知道的更新条形图;但是，与我能够更新的条形图相比，饼图的功能似乎不同。

无论如何，这是我的饼图结构：

var color = ["red","blue","green","orange"];
var data = [10,12,15,17];
var data2 = [21,22,14,12];
var dataKey = ["Employed","Student","Unemployed","Retired"];
var radius = 200;
var canvas = d3.select("#general_graph").append("svg")
  .attr("width",400)
  .attr("height",400);

var group = canvas.append("g")
  .attr("transform","translate(200,200)");

var arc = d3.svg.arc()
  .innerRadius(120)
  .outerRadius(radius);

var pie = d3.layout.pie()
  .value(function(d){return d;});

var arcs = group.selectAll(".arc")
  .data(pie(data))
  .enter()
    .append("g")
    .attr("class","arc");

arcs.append("path")
  .attr("d",arc)
  .attr("fill",function(d,i){return color[i];});

var text = arcs.append("text")
  .attr("transform",function(d){return "translate("+arc.centroid(d)+")";})
  .attr("text-anchor","middle")
  .attr("font-size","1.5em")
  .attr("fill","#fff")
  .attr("font-family","Franklin Gothic")
  .text(function(d){ return Math.round(d.data); });

这可以按预期工作，但试图找到一个使用与我设置饼图相同方式的示例图表似乎是不可能的。以下是我目前在升级方面的不足之处：

document.body.onkeyup = function(e){
    if(e.keyCode == 17)
    {
      /*
      arcs.data(pie(data2));
      canvas.selectAll("path")
        .attr("d",arc)
        .attr("fill",function(d,i){return color[i];}); */

      update();


      /*
      text
        .data(pie)
        .transition().duration(750)
        .attr("transform",function(d){return "translate("+arc.centroid(d)+")";})
        .text(function(d){ return Math.round(d.data); }); */
    }
}

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

function update(){
  var path = group.selectAll("path")
    .data(pie(d2_data2))
    .enter().append("path")
    .attr("fill", function(d, i) { return color[i]; })
    .transition()
    .delay(function(d, i) {
      return i * 800;
    })
    .attrTween('d', function(d) {
     var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
     return function(t) {
         d.endAngle = i(t);
       return arc(d);
     }
    });
}

正如您所看到的，当按下“CTRL”键时图表应该升级;但是，由于我对饼图更新功能的误解，它没有。

同样，这是指向CodePen posts.

的链接

非常感谢任何帮助。谢谢。

Answer 1

工作代码：http://codepen.io/anon/pen/JWbMGP?editors=1010

您的问题不在于饼图，而在于D3的数据加入。

首先，您的第二个数据阵列.data(pie(d2_data2))应该是.data(pie(data2))

您必须注意D3如何确定哪些数据enter或update data和data2都具有相同的长度，因此当您提供D3 {{ 1}}它将其视为更新而非输入。

我已将您的代码一般化，以便您只需将所需的数组传递给data2即可。

正确更新D3饼图

1 个答案: