D3.JS 막 대형 차트의 막대 애니메이션

Question

바를 차례대로로드하도록 막대를 움직이는 bar char을 작성하려고합니다. 지금까지 JSFiddle에서 볼 수있는이 기능이 있지만 전환이 원활하지 않습니다. 애니메이션을보다 부드럽게 만들기 위해 어떤 변화가 일어나는지 알려 주시기 바랍니다.

CSS :

body { 
    font: 10px sans-serif; 
} 
.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.bar { 
    fill: #41a2d3; 
} 

.x.axis path { 
    display: none; 
} 

.tipsy-inner { 
    text-align: left;   
}     
.tipsy-inner a { 
    color: white; 
} 

.grid .tick { 
    stroke: lightgrey; 
    opacity: 0.7; 
} 
.grid path { 
     stroke-width: 0; 
} 

SCRIPT :

var jsonData = [{"dist":"NE_BLR1","bscore":93.707634,"cscore":88.206},{"dist":"NE_BLR2","bscore":2.9553592,"cscore":28.037703},{"dist":"NE_BLR3","bscore":6.6249013,"cscore":60.771496},{"dist":"NE_BLR4","bscore":90.87391,"cscore":86.42939},{"dist":"NE_BLR5","bscore":81.874275,"cscore":1.5155494},{"dist":"NE_BLR6","bscore":11.794424,"cscore":11.316788},{"dist":"NE_BLR7","bscore":42.103214,"cscore":42.328335},{"dist":"NE_BLR8","bscore":96.59683,"cscore":2.5692165},{"dist":"NE_BLR9","bscore":80.03519,"cscore":34.86772},{"dist":"NE_BLR10","bscore":67.834175,"cscore":39.31076},{"dist":"NE_BLR11","bscore":26.525862,"cscore":18.048836},{"dist":"NE_BLR12","bscore":14.0657425,"cscore":29.272057},{"dist":"NE_BLR13","bscore":20.054913,"cscore":53.572613},{"dist":"NE_BLR14","bscore":11.77302,"cscore":66.45609},{"dist":"NE_BLR15","bscore":81.25657,"cscore":77.80638},{"dist":"NE_BLR16","bscore":47.63029,"cscore":1.1937499},{"dist":"NE_BLR17","bscore":79.54459,"cscore":81.614},{"dist":"NE_BLR18","bscore":94.08074,"cscore":80.3455},{"dist":"NE_BLR19","bscore":55.68032,"cscore":89.06907},{"dist":"NE_BLR20","bscore":45.28445,"cscore":45.069145},{"dist":"NE_BLR21","bscore":82.41166,"cscore":59.125107},{"dist":"NE_BLR22","bscore":33.733047,"cscore":93.37988},{"dist":"NE_BLR23","bscore":98.53198,"cscore":18.078703},{"dist":"NE_BLR24","bscore":83.15471,"cscore":40.400578},{"dist":"NE_BLR25","bscore":3.6420703,"cscore":45.9239},{"dist":"NE_BLR26","bscore":56.563927,"cscore":83.02267},{"dist":"NE_BLR27","bscore":10.62563,"cscore":76.39983},{"dist":"NE_BLR28","bscore":83.05605,"cscore":91.5188},{"dist":"NE_BLR29","bscore":99.7658,"cscore":32.68316},{"dist":"NE_BLR30","bscore":79.63283,"cscore":78.877335},{"dist":"NE_BLR31","bscore":27.242237,"cscore":51.338135},{"dist":"NE_BLR32","bscore":69.210144,"cscore":11.239213},{"dist":"NE_BLR33","bscore":6.4760566,"cscore":53.43964},{"dist":"NE_BLR34","bscore":60.054676,"cscore":18.344189},{"dist":"NE_BLR35","bscore":93.7649,"cscore":99.91859},{"dist":"NE_BLR36","bscore":30.083233,"cscore":91.4337},{"dist":"NE_BLR37","bscore":80.51691,"cscore":28.400452},{"dist":"NE_BLR38","bscore":19.416237,"cscore":44.272415},{"dist":"NE_BLR39","bscore":79.10841,"cscore":60.43038},{"dist":"NE_BLR40","bscore":1.789844,"cscore":89.061325},{"dist":"NE_BLR41","bscore":14.223904,"cscore":4.383576},{"dist":"NE_BLR42","bscore":88.20337,"cscore":97.80883},{"dist":"NE_BLR43","bscore":18.071491,"cscore":62.987053},{"dist":"NE_BLR44","bscore":30.62138,"cscore":87.54846},{"dist":"NE_BLR45","bscore":17.996502,"cscore":1.733619},{"dist":"NE_BLR46","bscore":88.58935,"cscore":67.55461},{"dist":"NE_BLR47","bscore":85.947365,"cscore":1.1164486},{"dist":"NE_BLR48","bscore":3.997153,"cscore":2.8819382},{"dist":"NE_BLR49","bscore":48.500816,"cscore":21.182537},{"dist":"NE_BLR50","bscore":88.485214,"cscore":92.17681}]; 

    var results, 
     data = [], 
     chart, 
     bars, 
     tip, 
     margin = 100, 
     w = 15, 
     h = 500, 
     count= 0, 
     x, y, 
     xAxis, yAxis; 

    results = d3.map(jsonData); 
    results.forEach(function(key, val) { 
     var result = {}; 
     count = count+1; 
     result.count = parseInt(count); 
     result.bscore = parseFloat(val.bscore); 
     result.cscore = parseFloat(val.cscore); 
     result.dist = val.dist; 
     data.push(result); 
    }); 

    chart = d3.select("body").append('svg:svg') 
     .attr('class', 'chart') 
     .attr('width', 1300) 
     .attr('height', h) 
     .append('g'); 

    d3.select('svg g') 
     .attr('transform', 'translate(50, 50)'); 

     x = d3.scale.linear() 
       .domain([0, data.length]) 
       .range([0, 960]); 

      y = d3.scale.linear() 
       .domain([0, d3.max(data, function(d) { return d.bscore; })]) 
       .rangeRound([h - margin, 0]); 

    chart.append("g")   
    .attr("class", "grid") 
    .call(d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .ticks(10) 
     .tickSize(-1000, 0, 0) 
     .tickFormat("") 
    ) 
    .attr("stroke-width", "0.2px"); 

    // Bars 
    bars = chart.append('g') 
     .attr('class', 'bars'); 

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

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

    chart.append('g') 
     .attr('class', 'x axis') 
     .attr('transform', 'translate(0, ' + (h) + ')') 
     .call(xAxis); 

    chart.append('g') 
     .attr('class', 'y axis') 
     .attr('transform', 'translate(' + x.range()[0] + ')') 
     .call(yAxis); 

    bars.selectAll('rect') 
     .data(data) 
     .enter() 
     .append('svg:rect') 
     .attr('class', 'bar') 
     .attr('x', function(d) { return x(d.count);}) 
     .attr('width', w) 
     .transition() 
     .delay(function (d,i){ return i * 300;}) 
     .duration(250) 
     .attr("y", function(d) { return y(d.bscore); }) 
     .attr('height', function(d) { return (h - margin) - y(d.bscore); }); 

JSFiddle : http://jsfiddle.net/pg77k/8/

TYIA 당신은 당신이 그들을 원하는에 y 및 height의 값을 초기화 할 필요가

Answer 1

~의 시작에있다. 그는 전환 :

.attr('height', 0) 
.attr("y", h - margin) 

완료 데모 here.