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;
});
被绑定的数据会传递给子元素
D3 datum()的更多相关文章
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...
- d3.js--02(data和datum原理)
原文链接: http://d3.decembercafe.org/pages/lessons/3.html 解析一下data和datum原理: datum():绑定一个数据到选择集上 data():绑 ...
- D3.js学习(四)
上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...
- D3数据绑定
这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a b ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- 精通D3.js学习笔记(1)基础的函数
买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var i ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- d3.js <一>
<html> <head> <meta charset="utf-8"> <title>HelloWorld</title&g ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
随机推荐
- laravel 控制器中使用 try catch
需要操作数据库时,当数据字段不一致,mysql报错,控制程序,需要使用try catch 下面是使用案例 $morder['morder_time'] = time();//在这里使用try catc ...
- XP IE8 安装失败
装完XP后,此时是IE6.装了QQ浏览器,提示会锁定浏览器主页,没怎么在意. 然后装IE8时,提示失败. 在网上搜索了下是其它浏览器或程序锁定了浏览器主页.卸载QQ浏览器后,成功安装IE8.
- bzoj 3615: MSS
Description 小C正在出一道题...因为语文水平有限他想不出复杂的背景,所以以下就是题意了. 平面上有N个点,开始时每个点属于一个不同的集合.不妨设点Pi属于集合Si.请维护数据结构支持以下 ...
- bs的过滤器功能例子
第一步 #src链接要符合下面要求,这里返回是 false or true def valid_img(src): return src.endswith('jpg') and 'img.jandan ...
- Java-Web 用html和css写一个EasyMall注册界面
要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> ...
- [转][Java]自定义标签简介
作用:自定义标签主要用于移除 jsp 页面中的 java 代码. 实现:需要完成以下两个步骤: 编写一个实现 Tag 接口的 Java 类,把页面 java 代码移到这个 java 类中.(标签处理类 ...
- CentOS 添加新硬件硬盘,扩展空间而无需重启虚拟机
运行如下命令,通过重新扫描 SCSI (注:Small Computer System Interface 小型计算机系统接口)总线并添加 SCSI 设备,系统就可以扩展操作系统的物理卷磁盘空间,而且 ...
- 在 Laravel 5 中使用 Laravel Excel 实现 Excel/CSV 文件导入导出功能
1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel ,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和 导出 ...
- 给iOS开发新手送点福利,简述UISlide的属性和用法
UISlide属性 1. minimumValue : 当值可以改变时,滑块可以滑动到最小位置的值,默认为0.0 _slider.minimumValue = 10.0; 2. maximu ...
- 常见的JS和CSS问题
事件冒泡 DOM的事件冒泡机制和WPF很相似,DOM事件机制包含冒泡和捕获两种,按照topmost element->innermost element方向传递事件被称为捕获方式,而从inner ...