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的宽度除以你的直方图中的bin数，以得到宽度都一样的条，填充整个图。所以加：

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/