d3.js 막대 그래프의 렌더링 문제

Question

각도 J와 통합 된 d3.js 막대 그래프를 개발 중입니다. 코드는 아래와 같습니다.

mainApp.directive('ngTest', function() { 
return { 
    restrict: 'AE', 
    scope: { 
     data: '=' 
      }, 
    link: function (scope, element) { 

     var margin = {top: 20, right: 30, bottom: 30, left: 60}, 
     width = 410 - margin.left - margin.right, 
     height = 230 - margin.top - margin.bottom; 

     var chart = d3.select(element[0]) 
        .append("svg") 
        .attr("width", width + margin.left + margin.right) 
        .attr("height", height + margin.top + margin.bottom) 
        .append("g") 
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); 

     var tip = d3.tip() 
        .attr('class', 'd3-tip') 
        .offset([-10, 0]) 
        .html(function(d) { 
         return "<strong>Frequency:</strong> <span style='color:red'>" + d.value + "</span>"; 
         }); 

     chart.call(tip); 

     //Render graph based on 'data' 
     scope.render = function(data) { 

      var y = d3.scale.linear() 
        .range([height, 0]) 
        .domain(d3.extent(data, function(d) { return d.value; })) 
        .nice(); 

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

      var yAxis = d3.svg.axis().scale(y).orient("left"); 

      x.domain(data.map(function(d) { return d.name; })); 

      //Redraw the axes 
      chart.selectAll('g.axis').remove(); 

      chart.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + (height) + ")") 
       .call(xAxis) 
       .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.8em") 
       .attr("dy", ".15em") 
       .attr("transform", function(d) { 
        return "rotate(-20)"; 
        }); 

      chart.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 0-margin.left) 
       .attr("x",0-(height/2)) 
       .attr("dy", "1em") 
       .style("text-anchor", "middle") 
       .text("Value"); 

      chart.selectAll(".bar") 
        .data(data) 
        .enter().append("rect") 
        .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })  
        .attr("x", function(d) { return x(d.name); })     
        .attr("y", height) 
        .attr("height", 0) 
        .on('mouseover', tip.show) 
        .on('mouseout', tip.hide) 
        .transition().duration(2000) 
        .attr("y", function(d) {return y(Math.max(0, d.value)); }) 
        .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })  
        // .attr("width", x.rangeBand()); 
        .attr("width", Math.min.apply(null, [x.rangeBand()-2, 100])); 
      }; 

     scope.$watch('data', function() { 
      scope.render(scope.data); 
      }, true); 

    } 
    }; 
}); 

전체 응용 프로그램은 내가 아래에 주어진 3 개 데이터 세트를

http://jsfiddle.net/HB7LU/9060/

주소

다음의 바이올린에 업로드됩니다.

$scope.myData = [ 
     {name: "01-12-2014", value: 4984.6}, 
     {name: "02-12-2014", value: -109.45}, 
     {name: "03-12-2014", value: 474}, 
     {name: "04-12-2014", value: 391.07}, 
     {name: "05-12-2014", value: 106.82}, 
     {name: "06-12-2014",  value: -5}, 
     {name: "07-12-2014", value: 30}, 
     {name: "08-12-2014", value: 9} 
           ]; 

$scope.myData = [ 
    {name: "01-12-2014", value: 474}, 
    {name: "02-12-2014", value: 391.07}, 
    {name: "03-12-2014", value: 106.82}, 
    {name: "08-12-2014", value: 9} 
          ] 

그래프는 위의 데이터 세트를 적용 할 때 정상적으로 작동합니다.

그러나 그래프 내가 정확한 문제를 식별 할 수 d3.js에 새로운 오전 이후 2 마지막 세트

$scope.myData2 = [ 
    {name: "01-12-2014", value: 474}, 
    {name: "02-12-2014", value: 391.07}, 
    {name: "03-12-2014", value: 106.82} 
          ]; 

이상의 원시 한 적은 추가로 포함하는 데이터 집합을 다음과 같은 사항에 대해 ubnormally 동작합니다. 여기

.attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })  

는 데이터 포인트의 y 값 사이의 차이로 높이를 설정하는 : 어떤 사람이 나에게

Answer 1

도와주세요 알고 있다면 당신의 문제는 당신이 바의 높이를 결정하는 방법에서 유래 0에서의 y 값은 그러나 사용자 Y 스케일은 데이터 셋의 최소값에서 시작 :

결과

var y = d3.scale.linear() 
     .range([height, 0]) 
     .domain(d3.extent(data, function(d) { return d.value; })) 
     .nice(); 

, y(0) 때때로 제외 될 수있다. 그들의 최소값은 0에 가깝기 때문에 다른 두 데이터 세트로는이를 알지 못했습니다. 여기에 내가 높이를 설정합니다 방법은 다음과 같습니다

.attr("height", function(d) {return Math.abs(y(d.value) - y(d3.min(y.domain()))) })  

아래 updated fiddle 플롯을 참조하십시오. 그것은 다른 데이터에 대한 사실이 아니다