Question

我试图在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

谢谢！

Answer 1

要执行此操作，您需要通过调整y坐标来移动该行。在您的情况下，通过从y(0)中减去height，这是最简单的方法，即

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

更新了jsfiddle here。

Answer 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/

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

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

d3js列条形图高度错误

2 个答案: