如何通过数据连接将多个x轴添加到d3图表中？

Question

我想立刻使用D3创建多个图表 - 代码是在这里：http://jsfiddle.net/jgilfillan/W85ut/

我有这些对象的数组bulletDataX：

function BulletObject(name, actual, target, ranges, bulletWidth) { 
this.name = name; 
    this.actual = actual; 
    this.target = target; 
    this.ranges = ranges; 
    this.maxX = ranges[2]; 
    this.bulletWidth = bulletWidth; 
    this.scale = d3.scale.linear().domain([0, this.maxX]).range([0, this.bulletWidth]); 
    this.xAxis = d3.svg.axis().scale(this.scale).orient("bottom"); 
} 

这是我想获得工作的代码。 ..

//axes??? not working 
svg.selectAll(".xaxis") 
.data(bulletDataX) 
.enter() 
.append("g") 
.attr("id", function(d) { return d.name; }) 
.attr("class", "x axis") 
.attr("transform", function(d, i) { return "translate(0, " + ((bulletHeight + bulletPadding) * i + .25 * bulletHeight).toString() + ")"; }) 
.call(function(d, i) { return d.xAxis; }); 

我知道我不得不摆弄转换属性有点，但我甚至无法得到轴显示。我认为这个问题与.call(function(d, i) { return d.xAxis; })有关，但我无法弄清楚如何让它起作用。任何想法将不胜感激。

Answer 1

的call方法不为你提供d, i参数。相反，它将：

调用指定的函数一次，在当前选择 经过任何可选参数一起。

见API文档：selection.call(function[, arguments…])

您可以尝试使用each代替。它：

调用在当前 选择每个元素指定的函数，传递当前原点d和索引i，与当前DOM元素的this 上下文。

见API文档：selection.each(function)

下面是一个代码示例：

.each(function (d, i) { 
    return d.xAxis(d3.select(this)); 
});