6

bl.ocks サイトの円グラフの更新の例では、要素が「その場で」更新されません。

http://bl.ocks.org/j0hnsmith/5591116

function change() {
  clearTimeout(timeout);
  path = path.data(pie(dataset[this.value])); // update the data
  // set the start and end angles to Math.PI * 2 so we can transition
  // anticlockwise to the actual values later
  path.enter().append("path")
      .attr("fill", function (d, i) {
        return color(i);
      })
      .attr("d", arc(enterAntiClockwise))
      .each(function (d) {
        this._current = {
          data: d.data,
          value: d.value,
          startAngle: enterAntiClockwise.startAngle,
          endAngle: enterAntiClockwise.endAngle
        };
      }); // store the initial values

  path.exit()
      .transition()
      .duration(750)
      .attrTween('d', arcTweenOut)
      .remove() // now remove the exiting arcs

  path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}

代わりに、値の新しい配列をまったく新しいデータとして扱い、それに応じてチャートのサイズを変更します。

問題を非常に簡単に示すフィドルを作成しました。

http://jsfiddle.net/u9GBq/23/

「追加」を押すと、ランダムな int が配列に追加されます。これは意図したとおりに機能します。

「削除」を押すと、トランジション アウトされる唯一の要素は、常にパイに入った最後の要素です。つまり、LIFO スタックのように動作します。予想される動作は、関連するパイ アークが代わりに遷移することです。

オブジェクトの一貫性をパイに適用することは可能ですか? また、キー関数を追加しようとしましたが（フィドルでは示されていません）、それは壊れるだけです（奇妙なことに、積み上げグラフではうまく機能します）。

ありがとうございました。

4

2 に答える 2

0

わかりました、解決策を見つけました。トリックは、この方法でキーを渡すことでした:

path = path.data(pie(dataset), function (d) {return d.data}); // this is good

渡さない、または間違った方法で渡すのではなく:

path = path.data(pie(dataset, function (d) {return d.data})); // this is bad

そして、右の円弧で動作するトランジションを備えた更新されたフィドルがあります! :)

http://jsfiddle.net/StephanTual/PA7WD/1/

于 2013-05-31T00:05:05.537 に答える