0

4 つの異なる「パネル」に棒グラフ グループがあります。xAxis ドメインをすべてデフォルトで 100 に設定しました。

  var x = new Array(panel.length);
  var xAxis = new Array(panel.length);
  for (var i=0; i<x.length; i++) {
    x[i] = d3.scale.linear()
      .domain([0, 100])
      .range([0, 100]);
    xAxis[i] = d3.svg.axis()
      .scale(x[i])
      .ticks(10)
      .orient("top");
    panel[i].append("g")
      .attr("class", "x axis")
      .call(xAxis[i]);
  }

いくつかのマウス操作で、4 つのパネルの x ドメインを変更したいと考えています。だから私はした：

var fields = [100, 200, 300, 400];
for (var i=0; i<panel.length; i++) {
    x[i].domain([0, fields[i]]);
    panel[i].selectAll(".x.axis").call(xAxis[i]);
}

次に、「パネル」に描画したバー（「バー」として分類される）の幅を変更すると、

for (var i=0; i<panel.length; i++) {
    panel[i].selectAll(".bar").transition().duration(1000)
      .attr("width", function(d) {
        x[i](d.point);
    });
}

しかし、すべての x[] ドメインが変更されたわけではないようです。複数の軸のドメインをループで一度に変更するにはどうすればよいですか?

4

1 に答える 1

0

通常、d3.jsでforループを使用する必要はありません。通常、選択範囲内のすべてのアイテムまたは指定したデータを繰り返し処理しますが、発生する可能性のある問題は、iおそらくその使用に関連していると思います。クロージャーでキャプチャする必要があります。これは、関数をバインドまたは無名関数でラップすることで実行できますが、幅に対する関数はすでに2番目の引数としてインデックスを取得していると思います。.bar詳細を知るには、何がコードを参照しているか、またはそれ以上を参照しているのかを確認する必要があります。

このようなものは役に立ちますか？

for (var i=0; i<panel.length; i++) {
    panel[i].selectAll(".bar").transition().duration(1000)
      .attr("width", (function(xFunc) { 
        return function(d) { xFunc(d.point); }
    })(x[i]));
}
于 2013-01-07T04:22:36.910 に答える