Binding data(数据绑定)

  D3各种图表的作用体现在将数据(Data)转换成可视化的过程。

  比如将一个月的气温数据,通过树形图来展现,能够直观的看到气温走势,下个月还需不需要穿秋裤 :)

  我们通过D3的 selection.data() 方法来将 data 绑定到 DOM 元素。因此,一个绑定过程的必要条件既是:data 和 DOM目标元素(没有目标元素,你还bind个卵~)。

从Data说起...

  D3还是很聪明的,可以处理多种data类型,像数组、字符串、对象类型。同样可以优雅的接受JSON,更牛B的是它拥有自己的内部方法,可以直接加载CSV文件(当然需要load CSV文件就不是我们在桌面创建个index.html然后用chrome打开那么easy了,你需要一个应用server,通过http还是https来获取CSV并加载了)。

  这里我们先准备一个简单的数组吧

var dataset = [1, 2, 3, 4, 5];

  既然上面都有一行code了,看了免不了还要写点代码了。我们要把上面的数组跟谁绑定呢?

d3.select("body").selectAll("p")

  你会说p都没append,哪来selectAll("p"),这是个问题,D3当然考虑到这一点了啊

d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("say say say you love me");

  enter()是个神奇的方法,运行上面的代码,你的页面应该打印出5行 "say say say you love me", 不顾一切,狠狠爱(有没有一种忍不住唱出了的冲动)

d3.select("body")         // 查找DOM中的body元素,返回body的引用

.selectAll("p")            //选中DOM中的所有p标签,当DOM中不存在p时,那么这个返回值将是null

.data(dataset)            //计算并且传递dataset的纸,数组长度为5,因此所有经过此节点的处理过程将处理5次,每次对应数组中不同的元素值

.enter()                    //创建新的DOM元素,当dataset的数据被传递至此,数组中的元素个数多于DOM中已有的p个数,enter()将会创建新的p元素来补充(推荐Google一下enter()和exit()具体使用方法)

.append("p")             //这里的p当然就是不够分时就创建一个的意思啦。。。

.text("say say say you love me") //这个谁给解释一下 :o

  

使用你的Data...

  完成了上面的逻辑,你应该会问 “本吊load上了data,仅仅只是for-each一下?”

  非也,下面我们开始使用上面load的数据

d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d){return "say say say you love me "+d+" times"}); //方法中的参数d既是dataset中对应索引位置的元素值 // .text(function(d, i){return "sample"}) 这里可以看到另一个参数i, i在此处的值表示的是当前 d 元素在 dataset 中的索引位置

  通过上面一段代码,任何时候,在调用data()方法之后,创建匿名方法,并将d作为参数传递进去,data() 方法将可以保证每次传递进去的参数 d 是 dataset 中对应的元素。好吧,我承认上面text()中定义的匿名函数有点low,不够炫酷。。。

  在text()方法中,心细的你也许会有疑问,为什么不直接写 .text("say say say you love me "+d+" times"); 原因是D3的许多方法,包括 .text() / .attr() 等它们都可以将一个方法作为参数,当然参数也可以是一个字符串(不包含运算的)。

关于除 array 以外的数据结构处理方式在实际应用中使用的并不是很多,比如简单的 key/value 对象类型,我们可以通过 d3.keys(data) 方法来获取各个value值。实际应用中还是需要根据自己的实际需求来组织便于处理的数据结构。

以上仅仅是一个D3内置data()方法的简单总结,便于快速入门,D3的高深远不止于此。拙笔之作,不对之处望海涵 :)

更多data()方法精妙解释和高级用例: http://alignedleft.com/tutorials/d3/binding-data

D3.js data() 方法详解的更多相关文章

  1. Js apply 方法 详解

    Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  2. Js apply方法详解,及其apply()方法的妙用

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  3. js数组方法详解

    Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...

  4. JS reduce()方法详解,使用reduce数组去重

     壹 ❀ 引 稍微有了解JavaScript数组API的同学,对于reduce方法至少有过一面之缘,也许是for与forEach太强大,或者filter,find很实用,在实际开发中我至始至终没使用过 ...

  5. js数组方法详解(最新最全)

    数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响.本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流 ...

  6. Js apply方法详解

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  7. 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

    在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...

  8. [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html

    本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...

  9. Js apply call方法详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

随机推荐

  1. develop process

    -f Option is dangerous, make sure that only do this on your own branch # When you starting coding at ...

  2. HTML&CSS基础学习笔记1.17-表格的头部与尾部

    表格的头部和尾部 既然有标签表示表格的主体,那么自然表格的头部和尾部也有对应的标签. HTML中使用<thead>标签表示表格的头部,使用<tfoot>标签表示表格的尾部. 有 ...

  3. apscheduler的使用

    最近一个程序要用到后台定时任务,看了看python后台任务,一般2个选择,一个是apscheduler,一个celery.apscheduler比较直观简单一点,就选说说这个库吧.网上一搜索,晕死,好 ...

  4. log4Net使用的四个步骤

    第一步.引入程序集,并建立配置文件,放在根目录下config文件夹里.配置文件如下: <?xml version="1.0" encoding="utf-8&quo ...

  5. JAVA中this用法小结[转]

    Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this.因此,this只能在类中的非静态方法中使用,静 ...

  6. 智能卡 ATR解析

    如果终端不支持IC卡支持的其它传输协议以及传输参数值,IC卡应该有能力用基本ATR定义的模式和终端进行交互. 终端如果无法满足IC卡回送ATR中定义的传输模式,将发送一个热复位信号,或将IC卡置为静止 ...

  7. iOS 9之New System Fonts(San Francisco 字体)

    金田 此次苹果发布的iOS 9系统测试版目前已经开放下载,新系统将弃用Helvetica字体,改用了San Francisco字体, 包括系统菜单.App名称等各个部分. 最初San Francisc ...

  8. C++ 中 struct和class 的区别

    来自:http://hi.baidu.com/pengxiangbobin19890125/blog/item/b05586eee77300212df53411.html   C++ prime  中 ...

  9. 负重前行的婚纱线上路 - i天下网商-最具深度的电商知识媒体

    负重前行的婚纱线上路 - i天下网商-最具深度的电商知识媒体 负重前行的婚纱线上路

  10. 关于初学者上传文件到github的方法

    转:http://blog.csdn.net/steven6977/article/details/10567719 说来也惭愧,我是最近开始用github,小白一个,昨天研究了一个下午.终于可以上传 ...