D3.js 过渡从高度 0 开始，需要从以前的值开始答案

【问题标题】：D3.js transition starts at height 0, needs to start at previous valueD3.js 过渡从高度 0 开始，需要从以前的值开始
【发布时间】：2016-02-24 22:06:08
【问题描述】：

我有一个显示数据的条形图，您可以通过按一个按钮过滤不同年份的数据。我希望图表从当前值过渡到新值，但现在每次按下按钮时它都会从底部开始。我该如何解决这个问题？

谢谢！

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);
    }

【问题讨论】：

标签： javascript d3.js svg var transitions

【解决方案1】：

重新审视它，我设法找到了解决方案。我删除了这一行中的标签栏：

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

所以现在所有的属性都设置在 bar.enter() 命令上，这样 d3.js 会自动从最后一个值开始过渡

【讨论】：