D3.js进阶系列之CSV表格文件的读取详解


Posted in Javascript onJune 06, 2017

前言

之前在入门系列的教程中,我们常用 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 。打开之后,像正常一样输入单元格的内容,假设输入如下:

D3.js进阶系列之CSV表格文件的读取详解

(2)点击“文件”,“另存为”。文件类型选择 “CSV 文本”,底下再勾选上“编辑筛选设置”。

D3.js进阶系列之CSV表格文件的读取详解

(3) 弹出的对话框中,选择编码(建议用 UTF8),字段分隔符选择"逗号",文本分隔符选择“分号”。点击“确定”。

D3.js进阶系列之CSV表格文件的读取详解

(4) 保存成功后,用记事本打开,结果如下:

D3.js进阶系列之CSV表格文件的读取详解

在 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 文件后,再输出读到的数据。输出如下:

D3.js进阶系列之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() 函数即可。

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

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
js保留两位小数方法总结
Jan 31 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
JavaScript实现移动端轮播效果
Jun 06 #Javascript
js评分组件使用详解
Jun 06 #Javascript
javascript中mouseenter与mouseover的异同
Jun 06 #Javascript
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
Node.js连接mongodb实例代码
Jun 06 #Javascript
jquery实现图片放大点击切换
Jun 06 #jQuery
AngularJS 验证码60秒倒计时功能的实现
Jun 05 #Javascript
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php格式文件打开的四种方法
2018/02/24 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
理解javascript对象继承
2016/04/17 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
大学生学习自我评价
2014/01/13 职场文书
民事答辩状格式范文
2015/05/21 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android