D3.js将更新模式应用于饼图

我正在尝试使用d3.js v4获取一个用于饼图的更新模式。从下拉菜单中选择时，数据会发生变化

我主要希望能够使用正确的更新模式，以便能够.exit（）.enter（）并更新数据。另外，我希望能够使用他从博斯托克的一个例子中使用的arcTween（）函数

我正在努力实施

目前我得到以下错误：

派不是一个函数

从第140行开始

  .data(pie(category_count),

并在下面的代码中用星号标记

这是代码的一部分

// Generate an array object on categories as a category
        var category_count = d3.nest()
          .key(function(d) {
            return d.category;
          })
          .rollup(function(leaves) {
            return leaves.length;
          })
          .entries(data);
        // console.log(category_count);

        var pie = d3.pie()
          .padAngle(.02)
          .sort(null)
          .value(function(d) {
            return d.value;
          })
          (category_count);

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

        var arc = d3.arc()
          .outerRadius(radius - 10)
          .innerRadius(radius / 2);

        var labelArc = d3.arc()
          .outerRadius(radius - 10)
          .innerRadius(radius - 100);

        var svgPie = d3.select("#pie")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")"); //center of pie

        var arcs = svgPie.selectAll("arc")
   ******** .data(pie(category_count), ******** 
            function(d) {
              return d.data.key
            });

        arcs
          .transition()
          .duration(4000)
          .attrTween("d", arcTween);

        // EXIT old elements not present in new data
        arcs.enter()
          .append("path")
          .attr("class", "arc exit")
          .style("fill", function(d, i) {
            return color[i];
          })
          .attr("d", arc)
          .each(function(d) {
            this._current = d;
          });

完整的代码在github上

---

非常感谢您的帮助。

您当前正在将

pie

设置为返回函数

d3.pie（）（category\u count）

d3.pie（）

本身返回一个函数。所以你想做的是：

var pie = d3.pie()
      .padAngle(.02)
      .sort(null)
      .value(function(d) {
        return d.value;
      });

那么当你这样称呼它的时候：

var arcs = svgPie.selectAll("arc")
   .data(pie(category_count),
        function(d) {
          return d.data.key
        });

---

现在，它使用参数

category\u count

调用函数

pie

，为什么在声明函数时将

category\u count

应用于函数？我不确定它是否返回了一个实际的函数。是的，@RyanMorton说的！您正在将pie设置为d3的返回值。pie（）（category_count）修复了它，非常感谢。我想知道为什么arcTween不工作。过来看