Javascript 如何为d3.js图表输出组织/嵌套数据

Javascript 如何为d3.js图表输出组织/嵌套数据,javascript,csv,d3.js,nested,hierarchical-data,Javascript,Csv,D3.js,Nested,Hierarchical Data,我正在寻找一些关于如何通过d3.js有效地使用大量数据的建议。比如说,我的数据集取自原始的.csv文件(从excel转换而来) 使用csv,我想表示这些数据的最好方法是: Org,Country,Month,Score EA,Netherlands,Jan,11.7999 EA,Belgium,Jan,27.6033 EA,France,Jan,20.2142 EA,Netherlands,Feb,15.0526 EA,Belgium,Feb,25.9374 EA,France,Feb,23.6

我正在寻找一些关于如何通过d3.js有效地使用大量数据的建议。比如说,我的数据集取自原始的.csv文件(从excel转换而来)

使用csv,我想表示这些数据的最好方法是:

Org,Country,Month,Score
EA,Netherlands,Jan,11.7999
EA,Belgium,Jan,27.6033
EA,France,Jan,20.2142
EA,Netherlands,Feb,15.0526
EA,Belgium,Feb,25.9374
EA,France,Feb,23.6186
EA,Netherlands,Mar,13.2411
EA,Belgium,Mar,24.1374
EA,France,Mar,20.2142
这对我来说似乎很冗长,而且会占用很多时间。我想知道有没有更简单的方法

根据我的想法,我认为JSON可能是更符合逻辑的选择

关于这些数据将进入哪种类型的图表,我希望创建一个饼图,根据所选国家/月份更新数据,并每次比较三个组织的得分

(plnk可视化)


谢谢你的建议,我在这里有点不知所措。

我想说,你建议的中间步骤是一个很好的方法,可以让所有的东西都在记忆中井然有序。您不必浏览csv文件,只需加载原始csv文件并将其转换为对象数组即可。下面是一个解析器:

d3.text("data.csv", function(error, dataTxt) { //import data file as text first
 var dataCsv=d3.csv.parseRows(dataTxt); //parseRows gives a 2D array
 var group=""; // the current group header ("organization")
 var times=[]; //the current month headers
 var data=[];  //the final data object, will be filled up progressively
 for (var i=0;i<dataCsv.length;i++) {
    if (dataCsv[i].length==1 ) { //group name
       if ( dataCsv[i][0] == "") 
          i++; //remove empty line
       group = dataCsv[i][0]; //get group name
       i++;
       times = dataCsv[i];//get list of time headings for this group 
       times.shift(); // (shift out first empty element)
     } else {
       country=dataCsv[i].shift(); //regular row: get country name
       dataCsv[i].forEach(function(x,j){ //enumerate values
         data.push({ //create new data item
           Org: group,  
           Country: country,
           Month: times[j],
           Score: x
         })
       }) 
    }
 }
这是你能拥有的最通用的结构。但这不是内存使用的最佳方式

一种简单的嵌套方法如下所示:

d3.nest()
  .key(function(d) { return d.Month+"-"+d.Country; })
  .map(data);
它将提供一个包含关键值的映射,例如:

"Jan_2016-Netherlands":[{"Org":"EA","Country":"Netherlands","Month":"Jan_2016","Score":"11.7999"},{"Org":"EB","Country":"Netherlands","Month":"Jan_2016","Score":"1.9024"},{"Org":"EC","Country":"Netherlands","Month":"Jan_2016","Score":"3.1499"}]
使用
条目
而不是
映射
来创建数组而不是映射,如果希望通过仅保留分数数组来简化数据,请使用
汇总
功能。在这一点上,将其插入任何d3绘图工具是相当简单的


PS:a使用此脚本的运行代码。所有内容都显示在控制台中。

这取决于您要优化的内容。。。磁盘使用率?从原始数据转换的简单性?快速加载?反应饼图?适合未来添加?它们听起来都很重要!我认为从原始数据转换的简单性和适合未来添加是最重要的。您是否尝试过转换为您想要的格式?从excel获取的原始csv文件看起来不正确。我的意思是,如果excel表格顶部的值是日期、左侧的国家和介于两者之间的值,那么第一个值(2016年1月之前)不应该是空的吗?是的-很抱歉,我在写文章时删除了它,当我将excel文件导出到csv(仅使用save as.csv)时,日期前确实有逗号,我将编辑帖子以将其放回-谢谢您需要在国家上方添加一个名称,例如,countries ass您不能有空属性。如果您只使用d3.csv(“csvlink.csv”),这里的函数(data){}d3.nest() .key(function(d) { return d.Month+"-"+d.Country; }) .map(data);
"Jan_2016-Netherlands":[{"Org":"EA","Country":"Netherlands","Month":"Jan_2016","Score":"11.7999"},{"Org":"EB","Country":"Netherlands","Month":"Jan_2016","Score":"1.9024"},{"Org":"EC","Country":"Netherlands","Month":"Jan_2016","Score":"3.1499"}]