1.加载数据的基本命令

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

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>test</title>
  5.     <script type="text/javascript" src="d3.js"></script>
  6. </head>
  7. <body>
  8.     <div id="borderdiv"> 123</div>
  9. </body>
  10.  
  11. <script>
  12.     d3.csv("cities.csv", function(data) {console.log(data)});
  13.     d3.json("flare.json",function(error,data2) {console.log(error, data2)});
  14. </script>
  15.  
  16. </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)

  1. nmp install http-server
  2. http-server C:\D3Test

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

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

3.异步加载

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

  1.  console.log("before csv ");
  2.  d3.csv("cities.csv", function(data) {console.log(data)});
  3.  console.log("before json");
  4.  d3.json("flare.json",function(error,data2) {console.log(error, data2)});

执行结果如下：

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

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

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

  1. 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. Unity C# 设计模式（二）简单工厂模式

    定义: 简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例 ...

  2. COGS——T 21. [HAOI2005] 希望小学

    http://www.cogs.pro/cogs/problem/problem.php?pid=21 ★★   输入文件:hopeschool.in   输出文件:hopeschool.out    ...

  3. java 究竟老年代和年轻代的比例为多大合适呢？

    眼下我还没有这方面过多的经验,和切身体会 只是以我眼下的水平看来,年轻代不宜大,假设年轻代大会导致转为老年代的时候,老年代撑不下.导致full gc.回收停顿时间过长

  4. IOS－－文件管理NSFileManager

    iOS的沙盒机制.应用仅仅能訪问自己应用文件夹下的文件.iOS不像android.没有SD 卡概念.不能直接訪问图像.视频等内容. iOS应用产生的内容,如图像.文件.缓存内容等都必须存储在自己的沙盒 ...

  5. POJ 1887 Testingthe CATCHER (LIS:最长下降子序列)

    POJ 1887Testingthe CATCHER (LIS:最长下降子序列) http://poj.org/problem?id=3903 题意: 给你一个长度为n (n<=200000) ...

  6. 基于Verilog语言的可维护性设计技术

    [注]本文内容主体部分直接翻译参考文献[1]较多内容,因此本文不用于任何商业目的,也不会发表在任何学术刊物上,仅供实验室内部交流和IC设计爱好者交流之用. “曲意而使人喜,不若直节而使人忌:无善而致人 ...

  7. commons-fileupload 多文件上传

    第三方的文件上传工具类,例如这个东东:http://www.oschina.net/p/commons-fileupload,解析的方法无非就是这样: 1:在 controller 中先 HttpSe ...

  8. HDU 4358 Boring counting dfs序+莫队算法

    题意:N个节点的有根树,每个节点有一个weight.有Q个查询,问在以u为根的子树中,有恰好出现了K次的weight有多少种. 这是第一次写莫队算法,之前也只是偶有耳闻. 看了别人的代码打的,还是贴上 ...

  9. tomcat7 bootstrap

    tomcat7 bootstrap http://t5crambing.iteye.com/blog/1923636

  10. Cisco交换机IOS配置介绍

    一.模式• 用户模式(>):• 特权模式(#):• 全局配置模式(config#):• 接口配置模式(config-if#):• 线路模式(#config-line): 二.基本IOS命令结构• ...