Переход D3.js начинается с высоты 0, необходимо начинать с предыдущего значения

Question

У меня есть гистограмма, отображающая данные, на которые вы можете фильтровать в разные годы нажатием кнопки. Я хочу, чтобы график переходил от текущего значения к новому значению, но теперь он начинается снизу каждый раз, когда вы нажимаете кнопку. Как я могу это исправить?

Спасибо!

var margin = {top: 20, right: 20, bottom: 30, left: 20}, 
height = 500 - margin.top - margin.bottom, 
width = 600 - margin.left - margin.right 

    function bars(data) { 

max = d3.max(data) 

var yScale = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, height])  

var xScale = d3.scale.ordinal() 
    .domain(d3.range(0, data.length)) 
    .rangeBands([0, width], .2)  


var myChart = d3.select("#chart") 

var bars = myChart.selectAll("rect.bar") 
    .data(data) 

//enter 
bars.enter() 
    .append("svg:rect") 
    .attr("class", "bar") 
    .attr("fill", "#800") 

//apply to everything (enter and update) 
bars.style('fill', '#C64567') 
    .attr('width', xScale.rangeBand()) 
    .attr('x', function(d,i){ 
     return xScale(i); 
    }) 
    .attr('height', 0) 
    .attr('y', height) 

bars.transition() 
    .attr('height', function(d){ 
     return yScale(d); 
    }) 
    .attr('y', function(d){ 
     return height - yScale(d); 
    }) 
    .duration(1000) 
    .ease('elastic') 
    } 

    function init() { 

//setup the svg 
var svg = d3.select("#svg") 
    .style('background', '#000') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom) 
    .append("svg:g") 
    .attr("id", "chart") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 

//UI 
d3.select("#button1") 
    .on("click", function (d, i) { 
     bars(j1996); 
    }) 
d3.select("#button2") 
    .on("click", function (d, i) { 
     bars(j1997); 
    }) 
d3.select("#button3") 
    .on("click", function (d, i) { 
     bars(j1998); 
    }) 

//draw the bars 
bars(j1996); 
    } 

Answer 1

Новый новый взгляд на него, и мне удалось найти решение. Я удалил бары тегов в этой строке:

//apply to everything (enter and update) 
bars.style('fill', '#C64567') 

Таким образом, все атрибуты теперь устанавливается по команде bar.enter(), таким образом, d3.js делает переходы автоматически из последнего значения