javascript - 使用d3.js创建一条穿过某些点的线

我的情况与JSFiddle中的情况非常相似，有些情况代表了一支球队（尤其是足球赛季的最终排名）。

我想用精确地通过这些点的直线来代替这些点，以便最终结果根据最终排名位置显示每个团队的时间演变。

我知道如何通过设置X1,X2,Y1,Y2坐标来创建一条线，但是我不知道如何将该坐标设置为确切的值（例如，如果该线在2006-2007赛季与2007-2008赛季之间，则必须设置X1和Y1的第一个季节的值分别为d[0]和d[1]，但对于X2和Y2，我需要数组中下一个元素的值。

我对D3.js非常陌生，因此欢迎您提出任何建议和解决方案。谢谢

最佳答案

基于这个小提琴，这就是我要做的：

首先，我为每个团队的圈子设置了一个班级（team1，team2等...）。因此，我以后可以检索每个团队的圈子值。

为了获取圆形值，我将使用一个for循环：

for(var j = 1; j < 4; j++){//this loops from "Team1" to "Team3"
var team = d3.selectAll("circle.Team" + j)[0];//selects the team by class
    for(var i = 0; i < team.length; i++){//this loops through the circles
        if(team[i+1]){//if the next circle exists
            svg.append("line")
                .attr("x1", d3.select(team[i]).attr("cx"))//this circle
                .attr("y1", d3.select(team[i]).attr("cy"))//this circle
                .attr("x2", d3.select(team[i+1]).attr("cx"))//the next circle
                .attr("y2", d3.select(team[i+1]).attr("cy"))//the next circle
                .attr("stroke", function(){
                    return _TEAM_COLORS_["Team" + j]
                });//sets the colours based on your object
        }
    }
};

这是更新的小提琴：https://jsfiddle.net/gerardofurtado/6cc0ehz2/18/