javascript - 带有正值和负值的d3.js直方图

我无法弄清楚如何在数据数组中同时存在正值和负值的情况下正确创建直方图。
我以http://bl.ocks.org/mbostock/3048450作为直方图示例作为基础，尽管x轴值和刻度正确，但这些柱子还是可以吃午餐的。
数据

var values = [-15, -20, -22, -18, 2, 6, -26, -18, -15, -20, -22, -18, 2, 6, -26, -18];

X尺度

var x0 = Math.max(-d3.min(values), d3.max(values));

var x = d3.scale.linear()
    .domain([-x0, x0])
    .range([0, width])
    .nice();

在此处检查jfiddle:http://jsfiddle.net/tNdJj/2/
我认为这是“矩形”创作中缺少的东西，但我没有看到。

最佳答案

诀窍在于，假设其输入为正，演示代码会过于乐观:

bar.append("rect")
    .attr("x", 1)
    // .attr("width", x(data[0].dx) - 1)   // Does the wrong thing for negative buckets.
    .attr("width", x(data[0].x  + data[0].dx) - 1)
    .attr("height", function(d) { return height - y(d.y); });

http://jsfiddle.net/tNdJj/46/