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 函数的掌握至关重要。

谢谢阅读。


文档信息


【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取的更多相关文章

  1. 【 D3.js 进阶系列 】 进阶总结

    进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...

  2. 【 D3.js 进阶系列 — 4.0 】 绘制箭头

    转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...

  3. 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取

    在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 O ...

  4. 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法

    在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题. 怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时.假设 xxx.csv 文件使用的是 UTF- ...

  5. 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  6. 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

    本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...

  7. 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

    本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...

  8. 【 D3.js 进阶系列 — 5.0 】 直方图

    直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...

  9. 【 D3.js 进阶系列 — 2.2 】 力学图的參数

    力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: ...

随机推荐

  1. (hdu 简单题 128道)平方和与立方和(求一个区间的立方和和平方和)

    题目: 平方和与立方和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  2. redis优化配置和redis.conf说明

    1. redis.conf 配置參数: #是否作为守护进程执行 daemonize yes #如以后台进程执行,则需指定一个pid,默觉得/var/run/redis.pid pidfile redi ...

  3. hdu 4747【线段树-成段更新】.cpp

    题意: 给出一个有n个数的数列,并定义mex(l, r)表示数列中第l个元素到第r个元素中第一个没有出现的最小非负整数. 求出这个数列中所有mex的值. 思路: 可以看出对于一个数列,mex(r, r ...

  4. PPPOE 模拟环境搭建

    这段时间.包含我自己測试OTT盒子 PPPOE的时候比較痛苦.要不就是在别人的位置上測试.要不就是借用PPPOE的设备,认为还是自己搭建一个PPPOE真实拨号上网的环境多好! 可是坑爹的win7找不到 ...

  5. Windows Phone开发人员必看资料

    win phone开发必看资料,下载地址收藏啦!收藏后可有选择性的下载,希望大家喜欢! 完整附件下载:http://down.51cto.com/data/414417 附件预览: Windows E ...

  6. 全面剖析Redis Cluster原理和应用 (转)

    1.Redis Cluster总览 1.1 设计原则和初衷 在官方文档Cluster Spec中,作者详细介绍了Redis集群为什么要设计成现在的样子.最核心的目标有三个: 性能:这是Redis赖以生 ...

  7. Hadoop里的Partitioner

    人们对于Mapreduce程序刚開始时都觉得仅仅须要一个reduce就够了. 毕竟,在你处理数据之前一个reducer已经把数据都分好类了,有谁不喜欢分好类的数据呢. 可是这样我们就忽略了并行计算的优 ...

  8. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  9. Error: ORA-16501: the Data Guard broker operation failed ORA-16625: cannot reach database

    在备库上建配置文件 DGMGRL> create configuration 'sharkdbbork' as primary database is 'sharkdb' connect ide ...

  10. PHP计算中文字符串长度 、截取相应中文字符串

    PHP计算字符串长度     及其   截取相应中文字符串 计算字符长度: $gouWu = '美日汇http://www.hnzyxok.com/'; echo mb_strlen($gouWu,' ...