Question

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

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

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

目前我收到以下错误，

派不是函数

从第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)的返回值。 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
        });

现在使用参数pie调用函数category_count。

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

1 个答案: