D3负值直方图 [英] D3 Histogram with negative values

问题描述

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

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;
                }})

但是当我在数据中添加一些负值时，数据的宽度就变得很奇怪(请参阅 http://jsfiddle.net/sbeleidy/K5EW7/)

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

我尝试了以下答案:带有正向和负向的d3.js直方图否定值并执行以下操作: http://jsfiddle.net/sbeleidy/M23ks/ 但这仍然无法正常工作.

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?

谢谢

推荐答案

您的width函数正在抛出错误.您应该将svg的宽度除以直方图中的bin数量，以得到均匀的宽度条，从而填充整个图形.因此添加:

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;

然后:

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/

这篇关于D3负值直方图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！