Question

假设我在age.csv中有这些数据。六列包含不同年份的三个人的姓名和年龄。

"name","1990","1992","1993","1994","1995"
"Rob",0,1,2,3,4,5
"Angie",15,16,17,18,19
"Chris",41,42,43,44,45

说我想用圆圈代表每个人。

var svg = d3.select("body").append("svg")
            .attr("width", 1000)
            .attr("height", 1000);

d3.csv("age.csv", function (data) {
       var people = svg.selectAll("circle")
                       .data(data)
                       .enter()
                       .append("circle")
                           .attr("cx", function(d) {return d[1990] * 10;})
                           .attr("cy", function(d, i) {return i*40; })
                           .attr("r", 20)
                           .attr("fill", "red");
});

此外，我希望圆圈沿x轴移动，从1990年的每个人年龄开始到1995年的年龄。要创建从一年到另一年的动画，我只需使用transition().attr("x", function (d) {return d[1991] * 10;})

但是如果我想重复这个过程来逐步过渡到数据呢？我尝试了.each("end", changeYear())使用changeYear()作为递归函数的不同方法，但在每个元素的x位置折叠之前我只能进行一次或两次转换，默认为0。

我完全迷茫，真的可以用某人指着我正确的方向。

修改很抱歉让这个帖子很长，但这是我错误的changeYear()递归函数。使用此功能，我还添加了.each(changeYear());作为上面people变量的最后一行。

var x = 0;
var years = [1990,1991,1992,1993,1994,1995);

function changeYear() { 
        return function() {
            x++;
            d3.select(this)
            .transition()
            .duration(1000)
            .attr("x", function (d) {return d[years[x]] * 10;})
            .each("end",change());
        }
    }

D3.js中基于数据的多个转换

0 个答案: