D3 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格式没有一个通用标准，通常使用的是RFC 4180 中所示的描述。
CSV 的文本格式如下：

省份,人口,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.js 中提供了 d3.csv() 函数来读取 CSV 文件。函数 API 可参见： https://github.com/mbostock/d3/wiki/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 的官方 API 中，看上去似乎还有一些函数： 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() 函数即可。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对帮客之家的支持。

D3 CSV表格文件的读取详解相关推荐

html文件中包含相关的d3.js文件,D3.js进阶系列之CSV表格文件的读取详解
前言之前在入门系列的教程中,我们常用 d3.json()函数来读取 json 格式的文件.json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 ...
java poi 模板填数据库,java使用POI读取excel模版并向固定表格里填写数据详解
java使用POI读取excel模版并向固定表格里填写数据详解:public class ExportExcelDemo { private HSSFWorkbook workbook = null; ...
php中读取大文件实现方法详解
php中读取大文件实现方法详解来源: 时间:2013-09-05 19:27:01 阅读数:6186 分享到:0 [导读] 本文章来给各位同学介绍php中读取大文件实现方法详解吧,有需要了解 ...
python网上批量下载表格_python爬虫智能翻页批量下载文件的实例详解
python爬虫遇到爬取文件内容时,需要一页页的翻页爬取,这样很是麻烦,其实可以获取每个列表信息下的文件名和文件链接,让文件名和文件链接处理为列表,保存后下载,实现智能翻页批量下载文件,本文以以京客隆 ...
JPG文件编解码详解——详细介绍编码和解码JPG
http://blog.csdn.net/zhengzhoudaxue2/article/details/7693258 JPEG文件编/解码详解 cat_ng 猫猫 JPEG(Joint Photo ...
JPG文件编解码详解
JPEG文件编/解码详解 cat_ng 猫猫 JPEG(Joint Photographic Experts Group)是联合图像专家小组的英文缩写.它由国际电话与电报咨询委员会CCITT(The ...
Android init.rc文件解析过程详解(三)
Android init.rc文件解析过程详解(三) 三.相关结构体 1.listnode listnode结构体用于建立双向链表,这种结构广泛用于kernel代码中, android源代码中定义了l ...
pythondifflib详解_用python标准库difflib比较两份文件的异同详解
[需求背景] 有时候我们要对比两份配置文件是不是一样,或者比较两个文本是否异样,可以使用linux命令行工具diff a_file b_file,但是输出的结果读起来不是很友好.这时候使用python ...
分布式表格系统Google Bigtable详解
分布式表格系统Google Bigtable详解概述 Bigtable架构数据分布保证副本位置与负载均衡存储表的分裂与合并存储引擎垃圾回收总结概述 bigtable系统由表格组成, ...

D3 CSV表格文件的读取详解

D3 CSV表格文件的读取详解相关推荐

最新文章

热门文章