d3js柱形图高度错误答案

【问题标题】：d3js column bar chart height errord3js柱形图高度错误
【发布时间】：2013-09-03 20:39:41
【问题描述】：

我正在尝试在 d3 中复制 this simple column bar chart，但也使用负值。我能够弄清楚如何使用负值，但现在我的轴似乎已关闭。我认为这可能是我对 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

谢谢！

【问题讨论】：

标签： d3.js

【解决方案1】：

为此，您需要通过调整y 坐标来向上移动线条。在您的情况下，这最简单的方法是从 height 中减去 y(0)，即

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

更新了 jsfiddle here.

【讨论】：

是的，谢谢拉尔斯。也添加了这个来对齐一个负条： .attr("x", function(d, i) { return x(i) - .5; }) .attr("y", function(d) { return d. value jsfiddle.net/Y4wAC/4 谢谢！

【解决方案2】：

诀窍是在 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/

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

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

【讨论】：