Q

d3軸底有填充

2016-05-21 67 views 0 likes

0

我想在圖的底部顯示兩個xAxis，一個放在另一個上面。因此，爲了讓我的軸位於底部，我在x1Axis和x2Axis上指定了.orient('bottom')。此外，我設置transform屬性translate(0, height)如在下面可以看到：d3軸底有填充

svg.append("g") 
    .attr("class", "x1 axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(x1Axis); 

for(var i = 0 ; i < x1domain.length; i++){ 
    svg.append("g") 
     .attr("class", "x2 axis") 
     .attr("transform", "translate("+ (x1.rangeBand()*i*(1/(1-x1padding))+ x1(x1domain[0])) + "," + height + ")") 
     .call(x2Axis); 
}

如所預期的，我結束了兩個軸疊加像這樣：

因此我修改x1Axis的變換屬性translate(0, height-x)將軸向上移動一點。無論x的值（未遂{X | 1 < = X < = 20}），我很驚訝地始終得到以下結果：

因此，我的問題是，我怎麼能兼得軸在底部，一個在另一個之上？行爲似乎被預定義爲剪切到頂部或底部。

注意：爲了討論的緣故，請忽略我爲x2Axis打印多個軸的事實。

2016-05-21 Philippe Hebert

+0

我也沒有發現任何奇怪在這裏你正在做'翻譯（0，高度-X）'所以軸移動了其中一個軸。做翻譯會相應地移動軸。 – Cyril

+1

那麼，如果我寫'translate（0，height-height）'，但在這種情況下'translate（0，height-1）'產生相同的結果，那會是預期的行爲 –

+0

「x」的值是什麼？就好像它大於'height'一樣，你會得到負的'translate's'第二個座標，即'translate（0，-200）'。 – robjez

A

回答

0

玩弄後，我發現，之所以把height - 1導致第二軸線行進到頂部。原因是Javascript會嘗試鍵入由於存在減號而將字符串的起始字符串轉換爲數字，然後將其添加到height - 1，導致NaN作爲transform屬性的值。

因此，從

.attr("transform", "translate(0," + height-1 + ")")

我改成了

.attr("transform", "translate(0," + (height-1) + ")")

解決與周圍height-1額外的括號中的類型轉換問題。

2016-05-22 19:58:25

相關問題