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

CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其它分隔符的表格文件。本文将说明在 D3 中如何读取它们。

 

1. TSV 表格文件是什么

TSV(Tab Separated Values),制表分隔值,它和 CSV 文件仅仅是分隔符不一致。它的格式如下:

 

2. D3 中读取 TSV 文件

在 D3 中读取 TSV 文件的方法和 CSV 文件是一样的,只要更改一下函数名即可。方法如下:

我们可以看到,这和【进阶系列 — 1.0】是基本一样的,详细说明可参见此文。

3. D3 中读取 CSV 和 TSV 的本质

在上面两节我们可以看到,读取 CSV 和 TSV 惊人地相似。其实它们本质上都是一个函数,我们来看看 D3 源码中的定义:

可以看到,它们其实都是 d3.dsv 函数。那么这个 dsv 函数是怎么回事呢?dsv 其实可以读取以任意字符或字符串作为分隔符的表格文件。接下来我们来试试用 dsv 函数读取以分号作为分隔符的表格文件。假设有如下文件:

读取的代码如下:

先用 d3.dsv(“;”, “text/plain”); 定义分隔符为分号,再按照读取 csv 和 tsv 文件一样的方法读取即可。但要注意第二行不再需要用 d3.dsv ,因为变量 dsv 已经是一个函数了。

 

4. 结束语

CSV 文件和 TSV 文件仅仅是分隔符不同,它们的本质都是调用的 DSV 函数,所以 DSV 函数的掌握至关重要。

谢谢阅读。


文档信息


【 D3.js 进阶系列 — 1.1 】 其他表格文件的读取》上有6条评论

  1. 老师,请问在做地图的时候我的json文件放在了Apache目录下的htdoc中,网页文件没有放在服务器目录下,但是总是画不成功是怎么回事?

  2. 请老师指教如下:
    d3.json(“/data/China.json”, function(error, root);
    但是到了发送请求时,却变成了
    GET http://localhost:8080/data/China.json
    项目名字不见了!
    要是手动添加项目名字就会有双重的,
    把JSON数据放在和页面同目录下写成China.json是OK的!

    • 这种情况要放在服务器根目录下的 data 文件夹里,并且命名为 China.json ,你是这么做的吗?

      • 是的!创建了data文件!China.json挪到page文件下,和页面一个目录,把路径改成China.json就OK,但是挪动到别的目录,改动相对的路径,就报错!我以为是tomcat的server.xml的配置问题,但是修改之后还是同样的发生的!GET请求404!

        • 路径写错了,如果是 data 文件夹下的,读取时要用
          d3.json(“data/China.json”, …
          而不是
          d3.json(“/data/China.json”, …
          你多写了一个斜杠

评论已关闭。