【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取
CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件。本文将说明在 D3 中怎样读取它们。
1. TSV 表格文件是什么
TSV(Tab Separated Values),制表分隔值,它和 CSV 文件不过分隔符不一致。它的格式例如以下:
name age
张三 22
李四 24
2. D3 中读取 TSV 文件
在 D3 中读取 TSV 文件的方法和 CSV 文件是一样的,仅仅要更改一下函数名就可以。方法例如以下:
d3.tsv("table.tsv",function(error,tsvdata){
console.log(tsvdata);
var str = d3.tsv.format( tsvdata );
console.log(str.length);
console.log(str);
});
我们能够看到,这和【进阶系列 — 1.0】是基本一样的,具体说明可參见此文。
3. D3 中读取 CSV 和 TSV 的本质
在上面两节我们能够看到,读取 CSV 和 TSV 惊人地相似。事实上它们本质上都是一个函数,我们来看看 D3 源代码中的定义:
d3.csv = d3.dsv(",", "text/csv");
d3.tsv = d3.dsv(" ", "text/tab-separated-values");
能够看到,它们事实上都是 d3.dsv 函数。那么这个 dsv 函数是怎么回事呢?dsv 事实上能够读取以随意字符或字符串作为分隔符的表格文件。接下来我们来试试用 dsv 函数读取以分号作为分隔符的表格文件。如果有例如以下文件:
name;age
张三;22
李四;24
读取的代码例如以下:
var dsv = d3.dsv(";", "text/plain");
dsv("table.dsv",function(error,dsvdata){
if(error)
console.log(error);
console.log(dsvdata);
});
先用 d3.dsv(";", "text/plain"); 定义分隔符为分号,再依照读取 csv 和 tsv 文件一样的方法读取就可以。但要注意第二行不再须要用 d3.dsv ,由于变量 dsv 已经是一个函数了。
4. 结束语
CSV 文件和 TSV 文件不过分隔符不同,它们的本质都是调用的 DSV 函数,所以 DSV 函数的掌握至关重要。
谢谢阅读。
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2014年10月03日
- 很多其它内容:OUR D3.JS - 数据可视化专题站 和
CSDN个人博客 - 备注:转载请注明出处,谢谢
【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取的更多相关文章
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 O ...
- 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法
在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题. 怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时.假设 xxx.csv 文件使用的是 UTF- ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...
- 【 D3.js 进阶系列 — 5.0 】 直方图
直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...
- 【 D3.js 进阶系列 — 2.2 】 力学图的參数
力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: ...
随机推荐
- (step 8.2.13)hdu 1524(A Chess Game)
题目大意 : 在一个 有向无环图顶点上面有几个棋子, 2个人轮流操作, 每次操作就是找一个棋子往它能够移 动的地方移动一格, 不能操作的人输. 输入第一行 为一个 N , 表示有 N 个顶点 0 -& ...
- oracle动态注冊參数local_listener
local_listener參数有两种书写格式,提供了不同的功能. 监听文件上,1521和1526port上都有动态监听port. [oracle@dbsv admin]$ cat listener. ...
- 使用注解实现 bean 转 csv
csv 文件是 aaa,bbb,ccc aaa,bbb,ccc 保存 这里的要求是 List<T> 线性表的类型 转换成 类别似 html 中 table的格式,即第一行是 head 后面 ...
- eclipse failed to create the java virtual machine 问题图文解析(转)
clipse failed to create the java virtual machine 解决方法: 1.问题现象 2.java虚拟机初始化失败!寻找eclipse解压路径 3.寻找ecl ...
- HYSBZ 2243(树链剖分)
题目连接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28982#problem/D 题意:给定一棵有n个节点的无根树及点权和m个操作, ...
- TSL230选型
tsl230是一种可以直接将光强转化成频率值的器件.详细原理就不介绍了,数据手冊里写的都非常清楚,230系列包括非常多种,主要为下面四类:TSL230,TSL230A,TSL230B系列:TSL230 ...
- GString及IntelliJIdea中调试Groovy的操作步骤
今天是学习Groovy的第一天,首先我觉得学习任何一种语言都要先弄清楚这种语言的特性,因为只有了解了特性之后学习才能达到好的效果,那么groovy的特点是什么的.我觉得groovy是一种动态语言,动态 ...
- SWT中各种参数大全
1按钮组件(Button) (1)Button组件常用样式 SWT.PUSH按钮 SWT.CHECK多选按钮 SWT.RADIO单选按钮 SWT.ARROW箭头按钮 SWT.NONE默认按钮 SWT. ...
- 浅析JAVA设计模式之工厂模式(一)
1 工厂模式简单介绍 工厂模式的定义:简单地说,用来实例化对象,取代new操作. 工厂模式专门负责将大量有共同接口的类实例化.工作模式能够动态决定将哪一个类实例化.不用先知道每次要实例化哪一个类. 工 ...
- C#获取设备的IP和Mac类
/// <summary> /// 此类用于获得设备的Ip和Mac /// </summary> public class Mac { [DllImport("Iph ...