2

次の例のように、5 つのブレット チャートを重ねて作成しようとしています: http://boothead.github.com/d3/ex/bullet.html

チャートには d3 および nvd3 パッケージを使用しています。各チャートをページのさらに下に繰り返して翻訳するにはどうすればよいですか? 私の作業コードは次のとおりです。

for (var i =0; i<5;i++){

  nv.addGraph(function() {
    var chart = nv.models.bulletChart();
    d3.select('#chart svg') 
      .append("svg:g")
      .datum(exampleData())
      .transition().duration(1000)
      .call(chart);
      return chart;
  }); 
}

しかし、これはすべてのチャートを互いに積み重ねるだけです。

svg:g 要素を追加した後、.attr("transform", "translate(0,"+i*50+")") を使用してみました。また、その後、

d3.selectAll("svg:g").attr("transform", function(i){ return "translate(0,"+i*50+")" });

スコープ内のカウンター変数を取得できないか、何らかの理由で正しく表示されません。ご提案ありがとうございます。

4

1 に答える 1

1

Two things to check:

  • use d3.selectAll to get all svg nodes
  • your transform function needs to take two parameters as in function(d,i) {...}. d refers to the data being processed, i is the index you want to use for displacement
于 2013-02-08T07:55:15.200 に答える