正文

D3.js data() 方法详解

IP云
IP云V管理员/14 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

相关阅读

目录[+]