代码之家  ›  专栏  ›  技术社区  ›  ofey

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

  •  0
  • ofey  · 技术社区  · 7 年前

    我正在尝试使用d3获得一个饼图的更新模式。js v4。从下拉菜单中选择时,数据会更改。

    主要是我想能够使用正确的更新模式,以便我可以。退出()。enter()并更新数据。此外,我希望能够使用他在博斯托克的一个示例中使用的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;
              });
    

    完整代码为 here 在github上。

    任何帮助都将不胜感激。

    1 回复  |  直到 7 年前
        1
  •  1
  •   pmkro    7 年前

    您当前正在设置 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
            });
    

    现在调用函数 馅饼 使用参数 category_count