D3.js进阶系列之CSV表格⽂件的读取详解
前⾔
之前在⼊门系列的教程中，我们常⽤d3.json() 函数来读取 json 格式的⽂件。json 格式很强⼤，但对于普通⽤户可能不太适合，普通⽤户更喜欢的是⽤ Microsoft Excel 或 OpenOffice Calc 等⽣成的表格⽂件，因为简单易懂，容易编辑。
Microsoft Excel 通常会保存为 xls 格式， OpenOffice Calc 通常会保存为 ods 格式。这些格式作为表格⽂件来说都很强⼤，但要读取它们是有些⿇烦的，D3 中也没有提供这样的⽅法。但是表格软件都会⽀持⽣成csv 格式，它是⼀种⾮常基本的、通⽤的、简单的表格⽂件。本⽂将会说明在 D3 中怎么读取和使⽤ csv ⽂件，下⾯来看看详细的介绍：
1. CSV 格式是什么
CSV(Comma Separated Values)，逗号分隔值，它是以纯⽂本形式存储表格数据的，每个单元格之间⽤逗号（Comma）分隔。CSV格式没有⼀个通⽤标准，通常使⽤的是中所⽰的描述。
CSV 的⽂本格式如下：
svg文件怎么生成省份,⼈⼝,GDP
⼭东,9000,50000
浙江,5000,20000
理解起来⾮常简单，每⼀个单元格之间⽤逗号隔开。如果想在单元格⾥输⼊逗号怎么办呢？⽤双引号框起来就⾏，如下：
省份,⼈⼝,GDP
⼭东,"9,000","50,000"
浙江,"5,000","20,000"
有些软件在保存CSV格式时，会让你选择使⽤什么符号（逗号、分号等）来分隔单元格，尽量选择逗号吧。
2. 在 OpenOffice 中编辑和保存 CSV ⽂件
Microsoft Excel 虽然强⼤却是收费的，近⼏年我已不使⽤。 OpenOffice 不仅开源免费，⽽且功能同样强⼤。下⾯来说⼀下⽤OpenOffice 怎么编辑和保存为 CSV ⽂件，当然⼀般⾃⼰摸索着也能会⽤，⾮常简单。
（1）⾸先，打开 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint ⼀样，OpenOffice 中编辑表⽰使⽤的是 Calc 。打开之后，像正常⼀样输⼊单元格的内容，假设输⼊如下：
（2）点击“⽂件”，“另存为”。⽂件类型选择 “CSV ⽂本”，底下再勾选上“编辑筛选设置”。
（3）弹出的对话框中，选择编码（建议⽤ UTF8），字段分隔符选择"逗号"，⽂本分隔符选择“分号”。点击“确定”。
（4）保存成功后，⽤记事本打开，结果如下：
在 D3.js 中，读取 CSV ⽂件的函数只⽀持⽤逗号分隔单元格，所以请务必这样保存。
3. 在 D3.js 中读取 CSV ⽂件
⽤它读取⽂件的代码如下：
d3.csv("table.csv",function(error,csvdata){
if(error){
console.log(error);
}
console.log(csvdata);
});
这段代码是读取了 table.csv ⽂件后，再输出读到的数据。输出如下：
我们可以看到，变量中 csvdata 是保存了⼀个数组，数组中的每个元素都⼀个对象，每个对象⾥都有 age 、name、sex 三个成员变量。这三个成员变量正是所编辑的表格的头⼀排的三个单元格。如此，我们就可以在代码中这样调⽤了。
for( var i=0; i<csvdata.length; i++ ){
var name = csvdata[i].name;
var sex = csvdata[i].sex;
var age = csvdata[i].age;
console.log( "name: " + name + "\n" +
"sex: " + sex + "\n" +
"age: " + age );
}
4. 将读⼊的数据转换为字符串
在 D3 的中，看上去似乎还有⼀些函数： parse 、parseRows、format、formatRows。但经过我的试验，只有 format ⼀个函数可以使⽤，其它的都是在 D3 内部使⽤的。基本上需要读⼊ CSV 的数据的情况下，只要有上⾯第3节所叙述的内容就⾜够了。
下⾯是 format 的使⽤⽅法。
d3.csv("table.csv",function(error,csvdata){
var str = d3.csv.format( csvdata );
console.log(str.length);
console.log(str);
});
上⾯的代码，str 中保存的就是转换后的字符串。
总结
CSV 格式是⼀种⾮常简单的表格⽂件，它的每个单元格以逗号分隔，有的表格编辑软件在保存的时候会让选择⽤分号或逗号等保存，这时候最好是选择⽤逗号。
在 D3 中读取 CSV ⽂件基本上只需要⽤d3.csv() 函数即可。
好了，以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论