带负值的 D3 直方图

Question

我一直在关注本教程：http://www.youtube.com/watch?v=cu-I2um024k，我正在尝试使用一组数据点创建直方图。当数据点都是正值时，我的代码可以正常工作：http://jsfiddle.net/sbeleidy/yDBQU/

var data = [1,2,3,4,5,6,9,12,23,5,4,1,2,30,24,21,18,19,41,43,36,38,5,52,1,23,1,2,5,3,1,2,4,4,21,2,3,4,1,2,5,7,8,5,3,1,10,12,24,4,21,34,35,35,35,35,36,37,32,1,31,32,32,23,23,24,25,27,45,46,47,0];

        var width = 500,
            height = 500,
            padding = 50;

        var histogram = d3.layout.histogram()
            .bins(data.length/3)
            (data);

        console.log(histogram);


        var someArray =[];
        for (var i=0; i < histogram.length; i++){
            someArray.push(histogram[i].length);
        }
        var maxVal = d3.max(someArray);

        var y = d3.scale.linear()
            .domain([0, maxVal])
            .range([0,height]);

        var x = d3.scale.linear()
            .domain([d3.min(data),d3.max(data)])
            .range([0,width])

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient('bottom');

        var canvas = d3.select('body').append('svg')
            .attr('width',width)
            .attr('height',height + padding)

        var xAxisPrinter = canvas.append('g')
            .attr('transform','translate(0,'+height+')')
            .call(xAxis);

        var bars = canvas.selectAll('.bar')
            .data(histogram)
            .enter()
            .append('g')

        bars.append("rect")
            .attr('x', function(d){return x(d.x);})
            .attr('y', function(d){return height - y(d.y);})
            .attr('width', function(d){return x(d.dx); })
            .attr('height', function(d){return y(d.y);})
            .attr('fill','steelblue')

        bars.append('text')
            .attr('x', function(d){return x(d.x); })
            .attr('y', function(d){return height - y(d.y);})
            .attr('dx',function(d){return x(d.dx)/2;})
            .attr('dy',"20px")
            .attr('text-anchor','middle')
            .text(function(d){
                if (d.y != 0){
                    return d.y;
                }
                else {
                    return null;
                }})

但是当我在数据中添加一些负值时，我会得到非常奇怪的数据宽度（请参阅http://jsfiddle.net/sbeleidy/K5EW7/）

我尝试了来自：d3.js histogram with positive and negative values 的答案并做到了：http://jsfiddle.net/sbeleidy/M23ks/ 但这仍然不起作用。

我做错了什么，我该如何支持负值？

谢谢

Answer 1

您的宽度函数正在扔东西。您应该将 svg 的宽度除以直方图中的箱数，以获得均匀的宽度条，填充整个图表。所以添加：

var numbins = histogram.length;

然后：

bars.append("rect")
    .attr('x', function(d){return x(d.x);})
    .attr('y', function(d){return height - y(d.y);})
    .attr('width', width/numbins)
    .attr('height', function(d){return y(d.y);})
    .attr('fill','steelblue')

或者，您可以将条形宽度定义为变量：

var barwidth = width/numbins;

然后将其作为宽度值传递。

查看这里的工作代码：

http://jsfiddle.net/M23ks/2/