1.加载数据的基本命令

D3提供了方法可以对不同的数据类型进行加载，比如d3.text(), d3.xml(), d3.json(), d3.csv(), 和d3.html().

<!DOCTYPE html>

<head>

    <meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>test</title>

    <script type="text/javascript" src="d3.js"></script>

</head>

<body>

    <div id="borderdiv"> 123</div>

</body>

<script>

    d3.csv("cities.csv", function(data) {console.log(data)});

    d3.json("flare.json",function(error,data2) {console.log(error, data2)});

</script>

</html>

上面的代码中加载了一个csv文件和一个json文件，function实际是一个callback，当然其中的error如果不需要的话可省去。

2.使用server来server file

在chrome中测试上面的代码会出现以下错误：

XMLHttpRequest cannot load file:/cities.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load

这是因为安全机制禁止了cross origin request，不允许直接读取本地文件, 所以我们需要一个webserver来server我们的数据。

window环境下可以在cmd中执行如下命令(前提是安装了npm)

nmp install http-server

http-server C:\D3Test

这样，我们便启动了一个server, 浏览器访问http://localhost:8080/index.html，然后便可以在console中看到加载的数据。

d3.csv()和d3.json加载数据返回的一个json对象的数组。

3.异步加载

将上面的script部分代码修改如下：

 console.log("before csv ");

 d3.csv("cities.csv", function(data) {console.log(data)});

 console.log("before json");

 d3.json("flare.json",function(error,data2) {console.log(error, data2)});

执行结果如下：

可以看到，实际执行顺序和代码中顺序并不符合。原因是d3.csv()和d3.json是异步加载数据的，而加载数据往往比其他操作需要更多的时间。也是由于这样原因，如果在数据加载完成之间进行数据请求将出现错误。

我们有两种方法可以绕开异步加载的问题

第一种：将数据加载和处理嵌套在一起

d3.csv("somefiles.csv", function(data) {doSomethingWithData(data)});

第二种：使用一些helper类库（queue.js）来实现在数据加载完成后出发相应的操作。

参考：D3.js in Action

D3.js加载csv和json数据的更多相关文章

  1. KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据

    Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...

  2. Knockout应用开发指南 第六章：加载或保存JSON数据

    原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...

  3. 第六章：加载或保存JSON数据

    加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多 ...

  4. 6.Knockout.Js（加载或保存JSON数据）

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

  5. Knockout.Js官网学习（加载或保存JSON数据）

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

  6. 使用异步任务加载网络上json数据并加载到ListView中

    Android中使用网络访问来加载网上的内容,并将其解析出来加载到控件中,是一种很常见的操作.但是Android的UI线程(也就是主线程)中是不允许进行耗时操作的,因为耗时操作会阻塞主线程,影响用户体 ...

  7. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  8. 使用js加载图像和setDataXML()加载数据

    使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...

  9. CSS实现树形结构 + js加载数据

    看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: li { position: relative; padding: 5px 0; margin:0 ...

随机推荐

  1. Python解析Socket数据流异常bytes问题

    Python解析Socket数据流异常bytes问题 -- 2019-03-12 python在通过socket发送数据时,英文字符转义后为原来本身的字符,占一个字节(如:s转移后为s),而中文字符在 ...

  2. 题解 P1179 【数字统计】

    嚯嚯嚯,这道题很显然是削弱版的51nod P1042. 那么显然我们需要使用数位DP解题. 思路大致是这样的: 对于每一个数字,考虑三种影响关系: 1. 它对低位的影响 2. 它对高位的影响 3. 高 ...

  3. 洛谷 P1703 那个什么密码2

    P1703 那个什么密码2 题目背景 https://www.luogu.org/problem/show?pid=1079 题目描述 与原题一模一样.具体不同请见输入格式 输入输出格式 输入格式: ...

  4. Qt之图形（转换）

    简述 QTransform类指定坐标系的2D转换,可以指定平移.缩放.扭曲(剪切).旋转或投影坐标系.绘制图形时,通常会使用. QTransform与QMatrix的不同之处在于,它是一个真正的3x3 ...

  5. 安装Signavio Web设计器

    在Jbpm3版本号中,这个著名的开源项目并没有基于浏览器的图形化流程设计器,结果导致流程设计一直停留在CS阶段. 比方我之前做过的一个OA项目.项目中採用的就是Jbpm3.因为它不支持在浏览器中的图形 ...

  6. ZOJ 1654 Place the Robots (二分匹配 )

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 Robert is a famous engineer. One ...

  7. bind DNS搭建笔记

    设置默认网关 偶尔会出现问题 route add default gw 192.168.0.1 .vim /etc/sysctl.conf 这里是重点 配置路由转发,路由开启等都要用到. # Cont ...

  8. Linux150个常用指令

    线上查询及帮助命令(2个) 文件和目录操作命令(18个) 查看文件及内容处理命令(21个) 文件压缩及解压缩命令(4个) 信息显示命令(11个) 搜索文件命令(4个) 用户管理命令(10个) 基础网络 ...

  9. vue.js原生组件化开发（二）——父子组件

    前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...

  10. 解决电信或网通的DNS劫持

    大家有没有碰到访问一些不存在域名或者网站时,浏览器本应显示一个网址不存在之类的信息,但是因为现在很多ISP做了DNS劫持将不存在的域名或网址重定向到ISP的广告页面,烦人的狠.其实tomato可以解决 ...