d3.js - d3js柱状图高度错误

Question

我试图在 d3 中复制这个简单的柱形图，除了使用负值。我能够弄清楚如何使用负值，但现在我的轴似乎已关闭。我认为这可能是我对 y 值所做的事情。

这里是我画酒吧的地方：

var chart = d3.select("body").append("svg")
        .attr("class","chart")
        .attr("width", w * data.length - 1)
        .append("g")
        .attr("height", h);


chart.selectAll("rect")
     .data(data)
     .attr("class","rect")
     .enter().append("rect")
     .attr("x", function(d, i) { return x(i) - .5; })
     .attr("y", function(d) { return h - y(d.value) - .5; })
     .attr("width", w)
     .attr("height", function(d) { return Math.abs(y(d.value) - y(0)); }); 

这里是所有东西的小提琴：http: //jsfiddle.net/Y4wAC/2/

我只想将 x 轴设为 0，所有条形都源自 x 轴，这可能很简单，但我是 n00b

谢谢！

Answer 1

诀窍是在 y 尺度上翻转域，以便您从 0 到 h 并从 y0 位置工作，正如 Lars 提到的：

var height = function(d){ return Math.abs(y(d.value) - y(0));}
var ypos = function(d){return d.value < 0 ? y(0) : y(0) - height(d);}

http://jsfiddle.net/XryuS/

最大的区别是添加了一些逻辑来计算属于 y0 点以下的负值的 ypos。在计算高度时也必须反映这一点。

您的示例在容器底部使用 y0，这意味着对于最小值 (-3)，您的示例绘制了一个从 0 到 30 而不是从 70 到 100 的矩形。

Answer 2

为此，您需要通过调整y坐标来向上移动线。在您的情况下，这最容易通过减去y(0)from 来完成height，即

.attr("y1", h - y(0))
.attr("y2", h - y(0))

在这里更新了 jsfiddle 。