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个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
随机推荐
- oracle/ms sql 系统表
sql server系统表详细说明 sysaltfiles 主数据库 保存数据库的文件 syscharsets 主数据库字符集与排序顺序 sysconfigures主数据库 配置选项 syscurco ...
- PyQt5系列教程(一)Mac OS X下搭建Python3.5.1+PyQt5开发环境
软硬件环境 OS X EI Capitan Python 3.5.1 PyQt 5.5.1 PyCharm 5.0.1 前言 Qt是一个开源的跨平台的GUI框架,为很多计算机语言提供了应用程序开发接口 ...
- 20165233 Java第四章学习总结
20165233 2017-2018-2 <Java程序设计>第三周学习总结 教材学习内容总结 基础 类:包括类声明和类体. 其中类声明的变量被称作对象变量,简称对象. 类体中包括两部分: ...
- 分享一个jquery插件,弥补一下hover事件的小小不足
hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你 ...
- ASP.NET web 应用程序项目
ASP.NET web 应用程序项目 .ashx .ashx.cs aspx包括前台一些代码要处理,ashx可以看作是没有aspx页面中前台代码的后台.cs文件. 没有了前台代码,服务器负担少一点, ...
- Memo synEditor 当前行号
Memo 当前行号,坐标,位置 可以使用Memo的属性CaretPos.X来取行鼠标所在行的行数与鼠标所在行的第几位 Memo.CaretPos.X 光标或鼠标所在行的列号(第几位),从0开始计数Me ...
- Android 包信息工具类
/** AndroidInfoUtils:安卓游戏包信息工具类**/ 1 public class AndroidInfoUtils { @SuppressWarnings("uncheck ...
- JS在生成csv文件时,","逗号问题处理.
在生成csv文件时,发现一个问题,因为csv文件本身是依靠逗号进行分列的,所以内容中有逗号时也被强制分列了,处理方法很简单,为内容加上双引号(英文格式)就可以了. 如: "11111,222 ...
- SpringMVC 学习笔记(处理器映射器的配置)
前端控制器(dispatchServlet) 在web.xml中配置前端控制器,在服务器启动时就被创建,用来对请求和响应进行接收 和 分发处理,其在配置时可以设置一个初始化参数,用来定位SpringM ...
- java中将数字的字符串表示转化为数字
int a = new Integer("1234").intValue() 或 int b = Integer.parseInt("1234") System ...