如何通過數據連接將多個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)); 
});