2

私は d3 円グラフを持っていますが、選択によってパスの値を更新するときに、個々のパスに追加されるいくつかの SVG タイトルを更新する方法を理解するのに苦労しています。

私のコードの簡素化されたバージョンを以下に示します。

私は、特に関数 change() で、さまざまなコード スニペットを試してきましたが、まだコツを見つけていません。すでに投稿されている良い例も見つかりませんでした。

ここでも、パス タイトル タグをツールヒントとして使用し、パス値を更新するときにテキスト値を更新しようとしています。

週末までにこのプロジェクトの締め切りがあるので、どんな助けもとても感謝しています。

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

var dataset = {
Y2012:  [1000, 2000, 3000],
Y2011:  [3000, 2000, 1000],
//etc.
};

var width = 300,
    height = 300,
    radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(outer_radius - 85)
    .outerRadius(outer_radius - 50);

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

var path = svg.selectAll("path")
    .data(pie(dataset.Y2012))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", outer_arc)
    .each(function(d) { this._current = d; });

var tooltips= d3.selectAll("path")
  .append("title")
    .classed("tooltip", true)
    .text(function(d) { return d.value });

d3.selectAll("#select_year").on("change", change);

function change() {
  path = path.data(pie(dataset[this.value])); // update the data
  path.transition().duration(750).attrTween("d", arcPathTween);
}

function arcPathTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}
4

1 に答える 1

3

問題は、 のタイトル テキストを更新しないことですfunction change()。タイトル テキストはデータにアクセスする関数によって作成されますが、データを更新するときにこの関数が自動的に再度実行されるわけではないことに注意する必要があります。これは手動で行う必要があります。

function change(newYear) {
    path = path.data(pie(dataset[newYear])); // update the data
    path.transition().duration(750).attrTween("d", arcPathTween);
    path.select("title").text(function(d) { return d.value });
}

ソリューションを示すフィドルも作成しています。

コードの重複を避けたい場合 (そうするべきです)、一般的な更新パターンを使用できます。これは、初期化と更新を同じ関数で行うことを意味します。

于 2013-04-25T06:00:56.480 に答える