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의 너비를 나누어 전체 그래프를 채워야합니다.

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 numbins = histogram.length; 

과 : 그래서 추가

var barwidth = width/numbins; 

는 바로 폭의 값으로 그 전달합니다.

작동 코드 여기를 참조하십시오

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