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

谢谢阅读。



文档信息



【 D3.js 进阶系列 — 1.1 】 其他表格文件的读取

时间: 2024-11-03 22:04:11

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

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

在入门系列的教程中,我们常用 d3.json() 函数来读取 json 格式的文件.json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,因为简单易懂,容易编辑.                       Microsoft Excel 通常会保存为 xls 格式, OpenOffice Calc 通常会保存为 ods 格式.这些格式作为表格文件来说都很强大,但要读取它们是有些麻烦的,D3

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

进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟到了吗? 呵呵,不知道这是谁给我灌输的观点.o(>﹏<)o 进阶系列的文章分为两部分,文章前括号里写有: [D3.js 进阶系列] [D3.js 选择集与数据详解] 虽然称之为"进阶",但并不是说一定要看完"入门"才能看.由于本人能力有限,不能很好地整理成由

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

在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题.怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时,如果 xxx.csv 文件使用的是 UTF-8 编码,不会有什么问题.当然,个人认为尽量使用 UTF-8 编码,可以在同一编码内使用各国文字. 但是,如果 xxx.csv 文件使用的是 utf-8 编码,使用 Microsoft Excel 打开的时候,可能会出现乱码,因为国内的 Excel 默认使用 GB2312 打开,而且在打开的时候不能选

【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)

拖拽(Drag)是交互式中很重要的一种,本文将讲解拖拽的使用方法. 1. drag的定义 D3中可用 d3.behavior.drag() 来定义 drag 行为. var drag = d3.behavior.drag() .on("drag", dragmove); function dragmove(d) { d3.select(this) .attr("cx", d.cx = d3.event.x ) .attr("cy", d.cy =

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

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.

【 D3.js 进阶系列 — 3.1 】 圆形分区图

分区图布局的 size 函数很有意思,即可用于制作矩形分区图,也可用于制作圆形分区图.本文就来谈讨一下圆形分区图的制作. 本文与[进阶 - 第 3.0 章]基本相同,只有布局函数的 size 函数和绘制图形的部分稍有区别. 1. 数据 本文仍然使用[入门 - 第 9.4 章]的数据,内容为中国境内几个城市的所属关系. 2. 布局(数据转换) var partition = d3.layout.partition() .sort(null) .size([2 * Math.PI, radius *

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

本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和[进阶 - 第 2.0 章]中,都用到了下面代码: force.on("tick", function(){ }); 这里的 force 是之前代码中定义的布局( Layout ).tick 表示当运动进行中每更新一帧时. 这是力学图中最常使用的事件,用于设定力学图每一帧是怎样更新的.除此

【 D3.js 进阶系列 — 3.2 】 分区图的函数

分区图的布局比较简单,本章介绍一下分区图的参数. 分区图布局为: d3.layout.partition() 其函数有6个. nodes() 将根数据传入后,得到的节点的数组,每个节点添加8个参数: parent - 父节点 children - 子节点 value - 表示节点的大小,由下面 value() 函数指定的值,父节点的值等于子节点值的和 depth - 节点的深度 x - 节点的x方向的坐标(不一定指x轴方向,跟据 size() 函数的意义而定) y - 节点的y方向的坐标(同上)

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

在 SVG 绘制区域中作图,在绘制直线和曲线时,常需要在某处添加箭头.本文介绍如何在 D3 中给直线和曲线添加箭头. 到目前为止,我们绘制 D3 的图表都是在 SVG 绘制区域内,虽然 D3 也可用 Canvas 或 WebGL 等作图,但 SVG 是最常用的.那么,用 D3 来绘制箭头,先要明白在 SVG 中是怎么绘制的. 1. 在 SVG 中定义箭头的标识 定义箭头的标识如下,先写一对 <defs> ,里面再写一对 <marker>,其中 marker 的属性的意义为: vie