javascript - d3js 饼图，刷新切片上的标签位置、饼图过渡

Question

所以我正在尝试 d3js 饼图布局。我已经成功地根据多个数据项对饼图进行了转换。并将每个项目的标签放置在切片的中心。

您可以在以下链接中查看我的示例:http://jsfiddle.net/ahbqP/

脚本如下所示:

var data_1 = [
              {"A": 43, "B": 10, "C":3, "D": 29, "E": 500},
              {"A": 20, "B": 2, "C":4, "D": 39, "E": 400 },
              {"A": 17, "B": 5, "C":6, "D": 19, "E": ""},
              {"A": 20, "B": 2, "C":2, "D": 69, "E": ""},
             ]

var width_1 = 500,
    height_1 = 400,
    radius_1 = Math.min(width_1, height_1) / 2;

var color_1 = d3.scale.category20c();

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

var arc_1 = d3.svg.arc()
    .innerRadius(radius_1 - 100)
    .outerRadius(radius_1 - 20);

var svg_1 = d3.select(".pie_container_1").append("svg")
    .attr("width", width_1)
    .attr("height", height_1)
  .append("g")
    .attr("transform", "translate(" + width_1 / 2 + "," + height_1 / 2 + ")");

var path_1 = svg_1.datum(data_1).selectAll("path")
      .data(pie_1)
    .enter().append("g")
      .attr("class", "slice")
      .append("path")
      .attr("fill", function(d, i) { return color_1(i); })
      .attr("d", arc_1)
      .each(function(d) { this._current = d; }); // store the initial angles


var pText = svg_1.selectAll(".slice")
    .append("text")
    .attr("class","val")
    .attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius_1;
                return "translate(" + arc_1.centroid(d) + ")";
            })
    .style("text-anchor", "middle")
    .data(data_1)
    .text(function(d) { return d.A + "%"; });

  d3.selectAll("input")
      .on("change", change_1);


function change_1() {
    var value_1 = this.value;
    // clearTimeout(timeout_1);
    pie_1.value(function(d) { return d[value_1]; }); // change the value function

    path_1 = path_1.data(pie_1); // compute the new angles

    var pathT = path_1.transition().duration(750).attrTween("d", arcTween_1); // redraw the arcs

    pText = svg_1.selectAll(".slice").select(".val").attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius_1;
                return "translate("+ arc_1.centroid(d) +")";
            })
    .style("text-anchor", "middle")
    .data(data_1)
    .text(function(d) { 
                        if( value_1 == "E" && d.E != "" ){ return d.E + "%"; }
                        if( value_1 == "D" ){ return d.D + "%"; }
                        if( value_1 == "C" ){ return d.C + "%"; }
                        if( value_1 == "B" ){ return d.B + "%"; }
                        if( value_1 == "A" ){ return d.A + "%"; }

                      });
  }

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween_1(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc_1(i(t));
  };
}

一切正常，除了一件事。调用 change_1 函数后文本标签的位置。他们留在以前的位置，因为我不知道如何设置新的位置值。加载时我将它们设置为:

.attr("transform", function(d) {
            d.innerRadius = 0;
            d.outerRadius = radius_1;
            return "translate(" + arc_1.centroid(d) + ")";
        })

但是在 change_1 中调用同样的事情不会移动它们。我假设我必须计算其他一些质心值，但我不知 Prop 体如何......

在change_1函数上如何将它们与新尺寸的弧一起移动？

您可以编辑我的 fiddle ，欢迎任何帮助或建议......

Answer 1

您在更改位置之前并没有更新绑定(bind)到 text 元素的数据，只是在更改位置之后才更新。因此，该位置未更新。

我已更新您的更改代码以在设置位置之前进行数据绑定(bind)，如下所示。

pText = svg_1.selectAll(".val").data(pie_1).attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius_1;
                return "translate("+ arc_1.centroid(d) +")";
            })

完整的jsfiddle here 。一般而言，如果您选择然后附加的元素(即不选择 .slice 然后附加 .val)，这将是更好的做法，正如我'已经在更新的代码中完成了。这使得调试代码和了解正在发生的事情变得更加容易。

哦，将属性设置为副作用(即设置变换的函数内的半径)也不是一个好的做法。