D3 datum()

datum()和data()功能类似。

datum():将指定数据赋值给被选择元素。
data():将数据数组与选择集的元素结合。

var p = d3.selectAll(‘p‘);
p.datum(7);//把7绑定在<p>中,在console中可以看到<p> _data_=7//p.datum(undefined/null),则<p>不会创建_data_属性

使用绑定的数字

var p = d3.select("body").selectAll("p");
p.datum("Thunder")		//绑定字符串Thunder到选择集上  //d其实就是data(‘Thunder‘),i是p的序号
  .text(function(d,i){	//替换内容
		return d + " " + i;
  });

被绑定的数据会传递给子元素  

  

时间: 2024-08-07 21:17:29

D3 datum()的相关文章

进口货规范的地方规划局可

http://www.gettyimages.cn/newsr.php?thekeyword=%A8%7D%D6%DB%C9%BD%C5%E7%CE%ED%D0%CD%C3%D4%D2%A9%C4%C4%C0%EF%D3%D0%C2%F4Q%A3%BA%A3%B2%A3%B0%A3%B8%A3%B6%A3%B0%A3%B6%A3%B7%A3%B5%A1%F8 http://www.gettyimages.cn/newsr.php?thekeyword=%A8%8E%CC%A8%D6%DD%C5%

女宇航员奶奶家

http://shike.gaotie.cn/zhan.asp?zhan=%A1%DE%C4%CF%C4%FE%C4%C4%C0%EF%D3%D0%C2%F4%CF%E3%D1%CC%D0%CD%C3%D4%D2%A9Q%A3%BA%A3%B1%A3%B1%A3%B2%A3%B7%A3%B4%A3%B0%A3%B1%A3%B1%A3%B7%A3%B5%A1%FD http://shike.gaotie.cn/zhan.asp?zhan=%A6%E6%C1%F8%D6%DD%C4%C4%C0%EF

d3.js--02(data和datum原理)

原文链接: http://d3.decembercafe.org/pages/lessons/3.html 解析一下data和datum原理: datum():绑定一个数据到选择集上 data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" conte

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

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

D3数据绑定的datum和data方法

这两个差别,一目了然. <!DOCTYPE html> <body> <div id="datum"> <p>Fire</p> <p>Water</p> <p>Wind</p> </div> <div id="data"> <p>Lion</p> <p>Tiger</p> <p>

d3系列2--api攻坚战02

<html> <head> <style type="text/css"> .area{ fill:steelblue; } </style> <title></title> </head> <body> <script src="js/d3.v3.min.js" type="text/javascript" charset="utf-

[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 】 绑定数据和选择元素

1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定到一起. D3 中是通过 data() 和 datum() 函数来绑定数据的,最常用的是 data(). 现有如下 HTML 代码: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3

[D3] 14. Line and Area Charts with D3

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { padding-top: 50px; padding-left: 100px; } #chart { width: 300px; height: