顏色代碼使用D3.js的LineString繪圖

如何根據從CSV文件中讀取的唯一值爲代碼行添加顏色？我希望根據從CSV文件讀取的每一行生成具有不同顏色的線串。顏色代碼使用D3.js的LineString繪圖

for(var i=0, len=data.length-1; i<len; i++){ 
     // (note: loop until length - 1 since we're getting the next 
     // item with i+1) 

     links.push({ 
      type: "LineString", 
      coordinates: [ 
       [ data[i].OperatorOwnerLon, data[i].OperatorOwnerLat ], 
       [ data[i].CountryOfContractorLon, data[i].CountryOfContractorLat ], 
       [ data[i].lon, data[i].lat ] 
      ] 
     })

來源

2016-11-23 sjaikumar

d3.js沒有任何本機顯示功能。它依賴於HTML，CSS，SVG，Canvas或其他任何你選擇的顯示技術。既然你在做文本行，HTML和CSS就足夠了。

你沒有說你想如何將經緯度座標轉換成顏色，所以我會選擇一個更簡單的例子，使用城市名稱。假設CSV是：

City,Country,Population 
Shanghai,China,24256800 
Karachi,Pakistan,23500000 
Beijing,China,21516000 
São Paulo,Brazil,11895893

假設你的HTML有你想要把文本div：

<div id='cities'></div>

首先你應該定義一個函數基於數據的每一行選擇顏色。我將使用標準的配色方案。然後通過數據循環，添加彩色線條：

var cities = d3.select('#cities'); 
var colorPick = d3.scaleOrdinal(d3.schemeCategory10); 

data.forEach(d => { 
    cities.append('p') 
     .style('color', colorPick(d.City)) 
     .text(d.City + ', ' + d.Country); 
});

這就是它的核心。隨着a little more prettification，結果是這樣的：

這是一個簡單的「第一個獲得第一色，第二個得到第二顏色，...」色彩方案。它適用於很多事情。

來源

2016-11-23 17:02:32

謝謝喬納森這樣一個詳細的答案。您的解決方案適用於我，並且可以對我繪製的弧線進行顏色編碼。謝謝：） – sjaikumar

顏色代碼使用D3.js的LineString繪圖

回答

相關問題