D3.js加载csv和json数据
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数据的更多相关文章
- KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据
Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...
- Knockout应用开发指南 第六章：加载或保存JSON数据
原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...
- 第六章：加载或保存JSON数据
加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多 ...
- 6.Knockout.Js（加载或保存JSON数据）
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
- Knockout.Js官网学习（加载或保存JSON数据）
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
- 使用异步任务加载网络上json数据并加载到ListView中
Android中使用网络访问来加载网上的内容,并将其解析出来加载到控件中,是一种很常见的操作.但是Android的UI线程(也就是主线程)中是不允许进行耗时操作的,因为耗时操作会阻塞主线程,影响用户体 ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- 使用js加载图像和setDataXML()加载数据
使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...
- CSS实现树形结构 + js加载数据
看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: li { position: relative; padding: 5px 0; margin:0 ...
随机推荐
- gcc/g++命令参数笔记
1. gcc -E source_file.c -E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c -S,只执行到源代码到汇编代码的转换,输出汇编代码. 3. ...
- Unity Launcher类，轻松打开网页，照片，app 等
using UnityEngine; using UnityEngine.WSA; public class test : MonoBehaviour { void Start () { //打开百度 ...
- 阿里云主机centos设置虚拟内存
http://blog.csdn.net/luwei42768/article/details/51241758 https://my.oschina.net/u/2306127/blog/65726 ...
- vs2010和qt4.8.4配置
最近项目要求在vs中开发qt程序,安装过后发现代码每天提示功能.由于本人记忆力有限,特在网上收罗了些配置方法. vs安装目录采用默认,qt安装目录:C:\Qt\4.8.4vs 在系统环境变量新建QTD ...
- POJ——T 1988 Cube Stacking
http://poj.org/problem?id=1988 Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 25865 ...
- Nutch1.6学习笔记
回 到 目 录 暑假每天傍晚或晚上更新 伪恋赛高 这里提供nutch1.6的src下载: apache-nutch-1.6-src.zip 115网盘礼包码:5lbcymlo6u76http://11 ...
- 【DevExpress】GridControl添加按钮列并添加按钮事件
在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...
- vue --- cli build 后的项目，图片路径出错
今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...
- COWRUN
USACO COWRUN 随机化搜索+双重递归调用 题面描述:给出8*N(<=14)组牌,每次按顺序选择8张,FJ可以选择前4张或者后4张,COW从FJ选出的牌中选择前两张或者后两张,然后COW ...
- chmod---变更文件或目录的权限
chmod命令用来变更文件或目录的权限.在UNIX系统家族里,文件或目录权限的控制分别以读取.写入.执行3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件与目录的权限, ...