在 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

您可以通过右键单击图表并单击 "inspect element" 按钮来查看它。您将看到三个 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); })

Losing bar when changing y-axis direction in d3.js