使用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个符号的图层，图形可能会非常精简！