2

D3.js の「更新」パターンをいじっています。「変更」ボタンを押すとデータが更新される単純な棒グラフを作成しています。

私の問題は、「変更」ボタンを押すと、レンダリングされた最初の 3 つのバーが再レンダリングされないことです。デバッグしたところ、データが適切に適用された (__data__正しい) ことがわかりましたが、再適用は失敗しました。

ここに私のコードとCodePenでのリンクがあります:

var myData = [ 100, 200, 300 ];

d3.select('body').append('button').text("Change").on("click", function() {
  myData = [200, 400, 600, 700, 800, 900, 1000];
  update(myData);
});

var svg = d3.select('body').append('svg')
  .attr("class", "chart")
  .attr("y", 30);

var update = function(data) {
  var bars = svg.selectAll('g')
    .data(data);

  var groups = bars.enter()
    .append("g")
    .attr("transform", function(d,i) {return "translate(0," + i*25 + ")"});

  groups
    .append("rect")
    .attr("height", 25)
    .attr("fill", "pink")
    .attr("stroke", "white");

  groups
    .append("text")
    .attr("x", 10)
    .attr("y", 18)
    .attr("fill", "red");

  bars.selectAll("rect")
    .attr("width", String);

  bars.selectAll("text")
    .text(String);
}; 

update(myData);
4

1 に答える 1

2

.selectAll()更新の選択処理を次のように変更すると機能し.select()ます。

bars.select("rect")
  .attr("width", String);

bars.select("text")
  .text(String);

を使用selectAll()すると、選択している要素 (つまり、四角形とテキスト要素) にバインドされているデータにアクセスできます。このデータは、要素を追加したときにバインドされます。gただし、含まれている要素に対してのみ更新したため、このデータは更新されていません。代わりに使用.select()すると、新しいデータが子要素にバインドされます。

使用している一般的なパターンはネストされた選択であり、最初は少し混乱し、予期しない結果につながる可能性があります。

于 2013-05-09T20:18:47.177 に答える