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));
  };
}

1つのことを除いて、すべてが正常に機能しています。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してから追加しないでください) の方が良い方法です。.valこれにより、コードをデバッグし、何が起こっているのかを理解することがはるかに簡単になります。

ああ、副作用として属性を設定すること（つまり、 を設定する関数内の半径transform）も良い習慣ではありません。

于 2013-11-07T16:38:48.697 に答える