在d3.js中改變y軸方向時丟失條紋

Question

我正在玩d3.js，我遇到了一些奇怪的事情。

當我改變

var yScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d.Distance})]) 
     .range([0, h]) 

到

var yScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d.Distance})]) 
     .range([h, 0]) # CHANGED LINE 

得到軸在正確的方向來算，一個酒吧去失蹤，其餘棒的高度不再與值對應在軸上。

在這裏看到一個jsfiddle

我檢查的文件，我無法找到我在這裏失蹤。任何幫助將不勝感激。

Answer 1

酒吧不會失蹤。它只有0的高度（即您看不到它），因爲您將域[0, 118377]中的最大值118377映射到範圍（[h, 0]）中的0。

您可以通過右鍵單擊圖形並單擊「檢查元素」按鈕來檢查它。你會看到三個rect元素，最後一個元素將會有height="0"。

我假設你想讓y軸從與x軸相交的0開始。看看這個fork of your fiddle，我改變了屬性計算爲以下：

... 
.attr("y", function(d) { return yScale(d.Distance); }) 
.attr("height", function(d) { return h - yScale(d.Distance); })