0

所以我正在尝试使用 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并不会移动它们。我假设我必须计算一些其他的质心值，但我不知道究竟如何......

在 change_1 函数上使用新大小的弧完全移动它们需要什么？

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

4

1 回答 1

2

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

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

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 。一般来说，如果您选择了随后要附加的元素（即不是 select.slice然后 append .val），就像我在更新的代码中所做的那样，那将是更好的做法。这使得调试代码和理解正在发生的事情变得更加容易。

哦，将属性设置为副作用（即设置函数内部的半径transform）也不是好的做法。

于 2013-11-07T16:38:48.697 回答