D3.js 选择元素和绑定数据

选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍。

一、如何选择元素

  在 D3 中,用于选择元素的函数有两个:

    •   d3.select():是选择所有指定元素的第一个
    •   d3.selectAll():是选择指定元素的全部

  这两个函数返回的结果称为选择集。例如,选择集的常见用法如下:

var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p");      //选择body中的第一个p元素
var p = body.selectAll("p");    //选择body中的所有p元素
var svg = body.select("svg");   //选择body中的svg元素
var rects = svg.selectAll("rect");  //选择svg中所有的svg元素

  选择集和绑定数据通常是一起使用的。

二、如何绑定数据

  D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上。这么说可能不好理解

  例如网页中有段落元素 <p> 和一个整数 5,于是可以将整数 5 与 <p>绑定到一起。绑定之后,当需要依靠这个数据才操作元素的时候,会很方便。

  D3 中是通过以下两个函数来绑定数据的:

    •   datum():绑定一个数据到选择集上
    •   data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定

  相对而言,data() 比较常用。假设现在有三个段落元素如下。

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

  接下来分别使用 datum() 和 data(),将数据绑定到上面三个段落元素上。

  

  datum()

    假设有一字符串 China,要将此字符串分别与三个段落元素绑定,代码如下:

var str = "China";

var body = d3.select("body");
var p = body.selectAll("p");

p.datum(str);

p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});

    绑定数据后,使用此数据来修改三个段落元素的内容,其结果如下:

第 0 个元素绑定的数据是 China

第 1 个元素绑定的数据是 China

第 2 个元素绑定的数据是 China

    在上面的代码中,用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时,常需要这么使用。其包含两个参数,其中:

      • d 代表数据,也就是与某元素绑定的数据。
      • i 代表索引,代表数据的索引号,从 0 开始。

    例如,上述例子中:第 0 个元素 apple 绑定的数据是 China。

  data()

    有一个数组,接下来要分别将数组的各元素绑定到三个段落元素上。

var dataset = ["I like dogs","I like cats","I like snakes"];

    绑定之后,其对应关系的要求为:

      • Apple 与 I like dogs 绑定
      • Pear 与 I like cats 绑定
      • Banana 与 I like snakes 绑定

    调用 data() 绑定数据,并替换三个段落元素的字符串为被绑定的字符串,代码如下:

var body = d3.select("body");
var p = body.selectAll("p");

p.data(dataset)
 .text(function(d, i){
      return d;
  });

    这段代码也用到了一个无名函数 function(d, i),其对应的情况如下:

      • 当 i == 0 时, d 为 I like dogs。
      • 当 i == 1 时, d 为 I like cats。
      • 当 i == 2 时, d 为 I like snakes。

    此时,三个段落元素与数组 dataset 的三个字符串是一一对应的,因此,在函数 function(d, i) 直接 return d 即可。

    结果自然是三个段落的文字分别变成了数组的三个字符串。

I like dogs

I like cats

I like snakes
时间: 2024-10-10 20:41:55

D3.js 选择元素和绑定数据的相关文章

D3.js 选择元素

在上一节中,已经讲解了 select 和 selectAll,以及选择集的概念.本节具体讲解这两个函数的用法. 假设在 body 中有三个段落元素: <p>Apple</p> <p>Pear</p> <p>Banana</p> 现在,要分别完成以下四种选择元素的任务. 一.选择第一个 p 元素 使用 select ,参数传入 p 即可,如此返回的是第一个 p 元素. var bodys = d3.select("body&q

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推.也可以不按照此顺序进行绑定,这就要用到data()的第二个参数.这个参数是一个函数,称为键函数(key function). 要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序.请看以下代码: <body> <!-- 三个空

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程 假设body中有三个段落元素p

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理方法通常是使用append()添加元素.请看下面的代码: <body> <p></p> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p

【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指

【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后,分别返回update.enter.exit部分 var update = selection.data(dataset); var enter = update.enter(); var exit = update.exit(); //1.update部分的处理方法 update.text( fun

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: [html] view plain copy <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: [html] view plain copy var set = ["I like dog","I like

d3.js:数据可视化利器之快速入门

hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,34,71]; 简单地思考一下,要完成这个任务有两个问题需要解决: 用什么可视元素来表现横向柱? 数据对应到可视元素的什么属性? 这个不算困难,我们使用HTML的DIV元素来实现,代码参见http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/:快速