Создайте линию, проходящую через некоторые точки с помощью d3.js

Question

У меня есть ситуация, очень похожая на ситуацию в этом JSFiddle с некоторыми очками, представляющими команду (в частности, ее окончательный ранг в футбольный сезон).

Я хотел бы подставить точки прямой, проходящей точно в этих точках, чтобы конечный результат показывал временную эволюцию каждой команды в терминах конечной позиции ранжирования.

Я знаю, как создать линию, установив координаты X1,X2,Y1,Y2, но я не понимаю, как установить эти координаты на точное значение (например, если линия находится между сезонами 2006-2007 и сезоном 2007-2008 гг., Я буду иметь установить X1 и Y1 со значением из первого сезона, как d[0] и d[1] но X2 и Y2 мне нужно значение из следующего элемента в массиве.

Я очень новый с D3.js поэтому любые советы и решение очень приветствуется. Спасибо

Answer 1

Основываясь на этой скрипке, это то, что я хотел бы сделать:

Во-первых, я бы поставил класс кругов каждой команды (TEAM1, team2 и скоро...). Таким образом, я мог бы позже получить значения кругов для каждой команды.

Для получения значения кругов, я хотел бы использовать для цикла:

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/

Answer 2

Предполагая, что вы уже указали некоторые данные для своих линий опираясь на фактические линии на основе этих данных так же просто, как это:

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]); 
   

2. объявить функцию строки:

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

3. и наконец, создать путь:

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

Обратитесь к дополнительной документации здесь: https://www.dashingd3js.com/