Question

我一直试图让饼图更新，并且它可以在CodePen中运行，但是当我尝试使其更大规模时它完全失败。

这是我遇到问题的代码：

var d2_data, d2_path, d2_pie, d2_text, d2_arc;
function D2_Update()
{
  d2_data = [d2_employed,d2_student,d2_unemployed,d2_retired];

  d2_path.data(d2_pie(d2_data))
    .transition().duration(1000)
    .attrTween("d", arcTween(null, d2_arc)); // Redraw the arcs

  d2_text.data(d2_pie(d2_data))
    .transition().duration(1000)
    .attr("transform", function (d) {
      return "translate(" + d2_arc.centroid(d) + ")";
    })
    .text(function(d){return d.data;});
}

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

当调用此更新函数时，图表上的文本会正确更新 - 一次 - 然后它无法像上面链接的CodePen那样实际更改弧。我收到的所有内容都是来自我的D3js JavaScript文件的控制台错误，读取TypeError: r is not a function。我在这里完全感到困惑，因为我不确定我应该做些什么不同。

在理解我的问题时，我们非常感谢您的帮助。我还将显示此图形饼图的代码：

// D2 pie
d2_data = [d2_employed,d2_student,d2_unemployed,d2_retired];
var d2_dataKey = ["Employed","Student","Unemployed","Retired"];

var d2_width = 400,
    d2_height = 400,
    d2_radius = Math.min(d2_width, d2_height) / 2;

d2_arc = d3.svg.arc()
    .outerRadius(d2_radius - 10)
    .innerRadius(d2_radius - 85);

d2_pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
        return d;
    });

var d2_svg = d3.select("#general_d2-graph").append("svg")
    .attr("width", d2_width)
    .attr("height", d2_height)
    .append("g")
    .attr("id", "pieChart")
    .attr("transform", "translate(" + d2_width / 2 + "," + d2_height / 2 + ")");

d2_path = d2_svg.selectAll("path")
    .data(d2_pie(d2_data))
    .enter()
    .append("path");

d2_text = d2_svg.selectAll("text")
  .data(d2_pie(d2_data))
  .enter()
  .append("text")
    .attr("text-anchor", "middle")
    .attr("transform", function (d) {
      return "translate(" + d2_arc.centroid(d) + ")";
    })
    .text(function(d){return d.data;});

d2_path.transition()
    .duration(1000)
    .attr("fill", function(d, i) {
        return color(d.data);
    })
    .attr("d", d2_arc)
    .each(function(d) {
        this._current = d;
    }); // Store the initial angles

谢谢。

D3js arcTween错误：r不是函数（更新失败）

0 个答案: