2016-07-22 46 views
1

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).Erstelle eine Linie, die einige Punkte mit d3.js passiert

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

Antwort

0

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/

+0

Vielen Dank! Deine Antwort hat sehr geholfen! Ich habe deine Fiddle aktualisiert, um die Linie für jedes Team zu erstellen. https://jsfiddle.net/6cc0ehz2/20/ Danke nochmals –

+0

Ich habe bereits die Geige bearbeitet, es gibt jetzt eine Zeile für jedes Team, in der Farbe des Teams. Aber ich habe gerade deine Geige gesehen, und deine Lösung ist besser: die Verwendung von 'Objekt.Tasten' ist vorzuziehen, als magische Zahlen in der äußeren Schleife zu verwenden! –

1

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/

+0

Sorry, ich verstehe nicht, eine Sache. Was ist 'myData', das ich an die Funktion übergeben muss? Ich habe es in meinem Beispiel in der Fiddle versucht, kann es aber nicht schaffen. –

+0

myData in diesem Fall ist ein JSON-Array von Koordinaten mit Ihrer Reihe von Linien – Nikolai

+0

Können Sie die JSFiddle bearbeiten, um die Linien zu erstellen? –