Question

我的情况非常类似于JSFiddle中的情况，其中一些点代表一个团队（特别是它在足球赛季的最终排名）。

我想用这些点中的一条线代替这些点，以便最终结果显示每个团队在最终排名位置方面的时间演变。

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

我对D3.js很新，所以非常欢迎任何建议和解决方案。感谢

Answer 1

假设您已经为线条声明了一些数据，根据该数据绘制实际线条就像这样简单：

创建X和Y比例：

var xScale = d3.scale.linear().domain([dataRange.x1, dataRange.x2]).range([plotRange.x1, plotRange.x2]);
var yScale = d3.scale.linear().domain([dataRange.y1, dataRange.y2]).range([plotRange.y1, plotRange.y2]);

声明行函数：

var valueLine = d3.svg.line()
.x(function (dataItem, arrayIndex) {
    return xScale(dataItem);
})
.y(function (dataItem, arrayIndex) {
    return yScale(dataItem)
});

最后创建路径：

g.append("path")
    .style("stroke", someColour)
    .attr("d", valueLine(myData))
    .attr("class", "someClass");

请参阅此处的更多文档：https://www.dashingd3js.com/

Answer 2

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

首先，我会为每个团队的圈子（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/

使用d3.js

2 个答案: