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会自动从最后一个值开始转换

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

1 个答案: