在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。

您可以通过右键单击图表并单击＆＃34;检查元素＆＃34;来检查它。按钮。您会看到三个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); })