Question

此项目基于Bostock's streamgraph.

我希望将其作为股票投资组合可视化工具。我可以让我的javascript运行我的所有股票代码（存储在symbols.csv中）并打印每个的当前价格。我不确定如何在流图中附加这些代替Bostock的随机数据生成器。 TBH，我没有与流程图本身结合，我只需要向如何将这些与可视化相关联的方向进行一些推动。我意识到我将需要历史数据而不是现在的数据。

注释掉的代码只是获取数据的另一种方式，而不是yahoo 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://docs.fluentd.org/v0.12/articles/parser_json

对于您的代码，您可以使用此格式创建数据集（即日期列，然后是每个符号的列，例如日期，BLK，BARAX等）。或者在循环每个符号时创建一个长数据集（日期，符号，价格），然后转换为宽（例如https://github.com/d3/d3-shape/blob/master/README.md#stack），但这可能会更慢。

顺便说一句，如果你有一个190个符号的图层，图表可能会非常精简！

使用d3 js

1 个答案: