d3 使用数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>
</head>
<body>
<script type="text/javascript"> var dataset = [ , , , , ]; d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "I can count up to " + d;
})
.style("color", function(d) {
if (d > ) { //大于15的数字显示为红色
return "red";
} else {
return "black";
}
}); </script>
</body>
</html>
.text(function(d){}), 在回调函数当中传入的数据分别对应数组当中的数据,
.style(), 同上,在回调函数当中传入对应的数据,根据数据返回字体的颜色
d3 使用数据的更多相关文章
- d3.js:数据可视化利器之快速入门
hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...
- D3中数据与DOM element绑定之data() enter() exit()浅析
几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works. ...
- [资料搜集狂]D3.js数据可视化开发库
偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...
- d3.js:数据可视化利器之 交互行为:响应DOM事件
selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...
- d3.js:数据可视化利器之 selection:选择集
选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selecto ...
- D3——动态绑定数据
一.绑定数组元素 , , , , ]; d3.select("body") .selectAll("p") .data(dataset) .enter() .a ...
- d3 根据数据绘制svg
, , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...
- d3根据数据绘制不同的形状
绘制力导向图的时候通常节点都是圆形,但也会遇到公司节点绘制成圆型,人绘制成方形的情况,那我们怎么依据数据绘制不同的形状. 你可能首先会想到,这很简单啊,是公司的时候append circle,是人的时 ...
- d3.js:数据可视化利器之 修改文档:DOM操作符
style: CSS样式操作符 style()操作符用来设置或获取选择集中各DOM元素的CSS样式: selection.style(name[,value[,priority]]) style()操 ...
随机推荐
- VC++:鼠标的使用
长期改变鼠标形状: SetClassLongPtr(GetSafeHwnd(), GCLP_HCURSOR, (LONG)LoadCursor(NULL, IDC_WAIT));//这个是x64下可以 ...
- 头文件种的ifndef/define/endif 是干什么用的
头文件种的ifndef/define/endif 是干什么用的? 答:防止头文件被重复包含.
- C语言结构体和共用体_07
概述 定义结构体类型变量的方法 结构体变量的引用 结构体变量的初始化 结构体数组 指向结构体类型数据的指针 用指针处理链表 共用体 枚举类型 用 typedef定义类型 概述 定义一个结构体的一般形 ...
- vc文件操作汇总—支持wince
一.判断文件及文件夹是否存在 // 判断文件是否存在 BOOL IsFileExist(const CString& csFile) { DWORD dwAttrib = GetFileAtt ...
- Linux虚拟机里用X11协议打开图形界面的eclipse
1.下载工具包 XLaunch(安装到win)https://xming.en.softonic.com/ Eclipse IDE for C/C++ Developers(虚拟机里解压到 /data ...
- 【 android】When an app is installed on the external storage
When an app is installed on the external storage: The .apk file is saved to the external storage, bu ...
- Python学习笔记:面向对象(类)
1.类定义:Python3中,如果新建的类没有继承任何其他类,默认继承基础类object.Python2中如果没有显式继承object类就是经典类,而显式继承了object类就是新式类,Python2 ...
- LeetCode(154) Find Minimum in Rotated Sorted Array II
题目 Follow up for "Find Minimum in Rotated Sorted Array": What if duplicates are allowed? W ...
- poj 3280 回文字符串问题 dp算法
题意:给一个字符串,构成回文(空也是回文) 其中增删都需要代价.问:代价最少? 思路:把字符串s变空 dp[i][j]表示变成回文的最小代价 for(i=m-1;i>=0;--i) ...
- 深入理解Python中的进程
1.进程的概念什么是进程—>CPU在同一时刻只能处理一个任务,只是因为cpu执行速度很快. cpu在各个任务之间来回的进行切换. 进程的概念:正在进行的一个过程或者说一个任务,而负责执行任务的则 ...