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

Question

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

主要是我希望能够使用正确的更新模式，以便我可以 .exit() .enter() 和更新数据。此外，我希望能够使用他在 Bostock 的一个示例中使用的 arcTween() 函数。

我正在尝试实施 this example by HarryStevens on b.locks。

目前我收到以下错误，

pie is not a function

从第 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 上的 here。

如有任何帮助，我们将不胜感激。

Answer 1

您当前正在将 pie 设置为函数 d3.pie()(category_count) 的 return。 d3.pie() 本身 return 是一个函数。所以你想要做的是：

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_count.

调用函数 pie

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

D3.js Applying update pattern to pie chart

updates

d3.js

pie-chart