使用D3 JS

Question

該項目適應一個streamgraph的股票投資組合的可視化是基於Bostock's streamgraph.

我期待使其成爲一個股票投資組合可視化。我可以讓我的javascript運行通過我的所有股票代碼（存儲在symbols.csv中）並打印每個股票的當前價格。我不確定如何在流圖中添加這些代替Bostock的隨機數據生成器。 TBH，我本身並沒有和流圖結婚，我只是需要向如何將它們與可視化結合起來。我意識到我將需要歷史數據而不是現在的數據。

註釋掉的代碼只是獲取數據的另一種方式，而不是雅虎api。

var i=[]; 
var splat;
 

var symbols = d3.csv("symbols.csv", function(data){ 
    var arrayLength = data.length;
 

for (var i = 0; i< arrayLength; i++){ 
    var symbol = data[i].ticker; 
    var yahooURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"; 
    var herokuappURL = "https://nasdaqviz.herokuapp.com/api/v1.1/markets/data/nsdaq/realtime/"+symbol; 
    splat = data[i]; 

// $.getJSON(herokuappURL, function(jsonData){ 
//  var quote2 = jsonData['Price']; 
//  document.write("<p>"+splat+" : "+quote2+"</p>"); 
// }) 


$.getJSON(yahooURL, function (jsonData){ 
    var quote = jsonData.query.results.quote; 

    document.write("<p>"+quote.Symbol+" : "+quote.LastTradePriceOnly+"</p>"); 
    }).error(function(xhr, errorType, exception) { 
    var errorMessage = exception || xhr.statusText; 

    console.log("Error "+errorMessage); }) 
}; 

}）;

任何幫助表示讚賞！我卡住了。這是github if you're interested。

Answer 1

堆棧格式喜歡的「寬」的數據格式，如D3 API中解釋說： https://github.com/d3/d3-shape/blob/master/README.md#stack

爲您的代碼，您既可以創建這種格式的數據集（即日期一欄，然後每個符號列，例如日期，BLK，BARAX等）。或者在循環遍歷每個符號然後轉換爲寬（例如http://jonathansoma.com/tutorials/d3/wide-vs-long-data/）時創建一個長數據集（日期，符號，價格），但這可能會更慢。順便說一句，如果你有190個符號的圖層，圖形可能會非常精簡！