0

假设我在 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())withchangeYear()作为递归函数的不同方法，但是在每个元素的 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());
        }
    }
4

0 回答 0