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

要检查的两件事：

  • 用于d3.selectAll获取所有 svg 节点
  • 您的transform函数需要采用两个参数，如function(d,i) {...}. d指正在处理的数据，i是你要用于置换的索引
于 2013-02-08T07:55:15.200 回答