創建通過一些點通過與d3.js

我有非常相似的人在這個JSFiddle與代表一個團隊的一些點的情況（特別是其最後的排名在足球賽季）一行。創建通過一些點通過與d3.js

我想與正好路過這些點線來替代點，使得最終結果顯示各隊的最終排名位置方面的時間演變。

我知道如何通過設置X1,X2,Y1,Y2座標以創建一個線，但我不知道如何設置這個座標的精確值（例如，如果該行是2006-2007賽季和季節之間的2007 - 2008年我將有從第一季設置X1和Y1與價值d[0]和d[1]但X2和Y2我需要在陣列中的下一個元素的值。

我很新與D3.js所以任何建議和解決方案非常歡迎。謝謝

來源

2016-07-22 Gio Bact

基礎上擺弄，這是我會怎麼做：

首先，我要一個類設置爲每個團隊的圓圈（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/

來源

2016-07-22 14:15:16

非常感謝！你的回答非常有幫助！我爲你的小提琴做了更新，爲每個團隊創造了一條線。 https://jsfiddle.net/6cc0ehz2/20/ 再次感謝 –

我已經編輯了小提琴，現在每支隊伍都有一條隊伍的隊伍顏色。但我只是看到了你的小提琴，而你的解決方案更好：使用Object.keys'比在外部循環中使用幻數更可取！ –

假設你已經宣佈了一些資料，供您行繪製基於該數據的實際線是如此簡單：

創建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/

來源

2016-07-22 13:46:32 Nikolai

對不起，我不明白一兩件事。什麼是我必須傳遞給函數的'myData'？我在小提琴中嘗試過我的例子，但無法使其工作。 –

myData在這種情況下是一個json數組的座標與您的系列行 – Nikolai

您可以編輯JSFiddle來創建行嗎？ –

創建通過一些點通過與d3.js

回答

相關問題