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" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据绑定</title>
<script src="d3.js"></script>
</head>
<body> <p>apple</p>
<p>organge</p>
<p>banaer</p>
<span></span>
<span></span>
<span></span> <script>
//datum()
var str = 'ccz';
var body = d3.select('body');
var p = body.selectAll('p');
p.datum(str);
console.log(p); p.text(function (d,i) {
return '第'+i+'绑定的元素是'+d;
})
//data()
var obj = ['like1','like2'];
var span = body.selectAll('span');
span.data(obj);
console.log(span);
p.text(function (d,i) {
return d;
}) </script>
</body>
</html>
在打印的时候发现每个p元素的属性中会多一个__data__,对应的数据就绑定在此属性上。
datum()会把值绑定在__data__属性上,所有元素的值都相同;
data()会把数组对象对应赋值到元素上,如果数值不够则此元素的text为空。
d3.js--02(data和datum原理)的更多相关文章
- D3.js学习笔记(一)——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...
- D3.js & Data Visualization & SVG
D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...
- Data Visualization and D3.js 笔记(1)
课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...
- D3.js data() 方法详解
Binding data(数据绑定) D3各种图表的作用体现在将数据(Data)转换成可视化的过程. 比如将一个月的气温数据,通过树形图来展现,能够直观的看到气温走势,下个月还需不需要穿秋裤 :) 我 ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- d3.js <一>
<html> <head> <meta charset="utf-8"> <title>HelloWorld</title&g ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
随机推荐
- 第一个Three.js程序——加入相机
- shell编程 条件判断式----利用 if .... then ----多重
条件判断式----利用 if .... then ----多重 在同一个数据的判断中,如果该数据需要进行多种不同的判断时,应该怎么作?举例来说,上面的 sh06.sh 脚本中,我们只要进行一次 $yn ...
- VxWorks实验六 基于优先级的抢占式调度及实验的源程序和实验步骤
基于优先级的抢占式调度及实验的源程序和实验步骤 1 实验目的 1.学习并验证基于优先级的抢占式调度2 实验内容 在实验一建立的 project 中,创建3 个任务,对这三个任务使用基于优先 ...
- 原型设计模式(prototype
# 什么是原型设计模式 > 这里与软件工程中的原型开发模式有那么一点类似的地方,我们首先需要构建出一个原型,这个原型可以在现实开发中抽象出来的具体类型,但是这个类型与具体的类又不同,需要抽取公共 ...
- Unity 关于时间
一.引言 本篇博客 包括:unity中帧的耗时,时间缩放比例,常用日期时间的获取和计算,测试一段程序的耗时. 二.帧时间 名称 描述 Time.time (只读)表示从游戏开发到现在的时间,会随着游戏 ...
- redis 拒绝远程访问解决
启动时报的警告: 1.Warning: no config file specified, using the default config. In order to specify a config ...
- js和jq中常见的各种位置距离之offset()和position()的区别(二)
offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...
- RTX51 Tiny
参考文档 :RTX51 Tiny 2.02 中文手册.doc.Keil_Rtx51_tiny_RTOS中文版.pdf RTX-51 有 2 个版本:Full 和 Tiny.类似的国人写的 Small ...
- 网页抓取解析,使用JQuery选择器进行网页解析
最近开发一个小功能,数据库中一个基础表的数据从另一个网站采集. 因为网站的数据不定时更新,需要更新后自动采集最新的内容. 怎么判断更新数据没有? 好在网站有一个更新日志提示的地方,只需要对比本地保留的 ...
- Funsioncharts 线图 破解
在线示例:http://jsfiddle.net/henley/xnozyLa8/2/ 下载:http://files.cnblogs.com/files/ycdx2001/chart.zip