D3 Histogram with negative values

问题

I've been following this tutorial: http://www.youtube.com/watch?v=cu-I2um024k and I'm trying to create a histogram using an array of data points. My code works fine when the data points are all positive values: 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;
                }})

But when I add some negative values in the data I get very weird widths for the data (see http://jsfiddle.net/sbeleidy/K5EW7/ )

I tried the answer from: d3.js histogram with positive and negative values and did this: http://jsfiddle.net/sbeleidy/M23ks/ but that's still not working.

What am I doing wrong and how can I support negative values?

Thanks

回答1:

Your width function is throwing things off. You should just divide the width of your svg by number of bins in your histogram to get even width bars, filling the whole graph. So add:

var numbins = histogram.length;

and then:

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')

alternately you could just define the bar width as a variable:

var barwidth = width/numbins;

then just pass that as the width value.

see here for working code:

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

来源：https://stackoverflow.com/questions/20184194/d3-histogram-with-negative-values

标签

javascript

d3.js

histogram