在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); })