javascript - 如何使用 nvd3、d3、javascript 错开子弹图

Question

我正在尝试制作 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+")" }); 

我似乎无法在范围内获取计数器变量，或者由于某种原因它无法正确显示。感谢您的任何建议!

Answer 1

要检查两件事:

• 使用d3.selectAll获取所有svg节点
• 您的transform 函数需要采用两个参数，如function(d,i) {...} 中所示。 d 指的是正在处理的数据，i 是你要用于位移的索引