Erstelle eine Linie, die einige Punkte mit d3.js passiert

Question

Ich habe eine Situation sehr ähnlich der in dieser JSFiddle mit einigen Punkten, die ein Team repräsentieren (insbesondere seinen letzten Rang in einer Fußballsaison).

Ich möchte die Punkte durch eine Linie ersetzen genau in diesen Punkten, so dass das Endergebnis die zeitliche Entwicklung der einzelnen Teams in Bezug auf die endgültige Rangposition zeigt.

Ich weiß, wie man eine Linie erstellt, indem man die X1,X2,Y1,Y2 Koordinaten einstellt, aber ich verstehe nicht, wie man diese Koordinaten auf den genauen Wert setzt (zB wenn die Linie zwischen Saison 2006-2007 und Jahreszeit 2007-2008 ich habe X1 und Y1 mit dem Wert aus der ersten Staffel zu setzen, wie d[0] und d[1] aber für X2 und Y2 ich brauche Werte aus dem nächsten Elemente in der Anordnung.

bin ich sehr neu mit D3.js so eine Beratung und Lösung Vielen Dank

Answer 1

Basierend auf dieser Geige, das ist, was ich tun würde:

Zuerst habe ich eine Klasse zu jeder Mannschaft Kreise gesetzt habe (team1, team2 und bald...). So konnte ich später die Werte der Kreise für jedes Team abrufen.

Für die Kreise Werte abzurufen, würde ich eine for-Schleife verwenden:

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 
     } 
    } 
}; 

Hier ist die Geige, aktualisiert: https://jsfiddle.net/gerardofurtado/6cc0ehz2/18/

Answer 2

Angenommen, Sie haben bereits einige Daten für Ihre Linien deklariert die tatsächlichen Linien auf der Grundlage dieser Daten Zeichnung als dies so einfach ist:

1. erstellen, um die X und Y Skalen:

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

2. und:

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

3. die Linienfunktion erklären Schließlich den Pfad erstellen:

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

hier, um weitere Dokumentation siehe: https://www.dashingd3js.com/