D3.js学习记录【转】【新】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>D3学习记录</title> <style> .chart{
background-color: #3498db;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
} </style>
<!-- 导入D3.js -->
<script src="js/d3.v3.min.js"></script> </head>
<body>
<script>
//create a data
var data = [4, 8, 5, 2, 10, 20]; //创建一个容器
var chart = d3.select("body")//选择元素
.append("div")//创建并添加新元素到选定元素后
.attr("class", "chart");//设置或获取指定属性
//向容器中添加几个div元素
chart.selectAll("div")//选择该元素的多个子元素组成元素集
.data(data)//设置或获取一组元素的绑定数据dataSet
.enter()//返回一个新的绑定了数据的元素
.append("div")
.style("width", function(d){
return d*10 + 'px';
})
.text(function(d){
return d;
})
</script>
</body>
</html>
D3.js也是一个javascript框架，像jquery一样， 只不过他的特长是在数据可视化这一块而已。所以不要觉得D3是多么的复杂。在上面的代码中我们可以看到D3的一些用法：
选择元素：d3.select(“element”)，这个就是jquery中的$()，只不过没有采用简写的形式。
创建并添加新元素到选定元素后：.append("element")，就是javascript中的append方法一样，他返回的是一个添加了该新元素的元素集。
设置或获取指定属性：.attr(name[, value])，同jquery中的attr()。
D3.js采用的是像jquery中的链式方法，在执行一个操作后可以继续调用其他的方法，但是，我们需要注意的是，前一个方法的输出类型必须要和下一个方法的输入类型相匹配！
选择所选的元素中的多个子元素组成新的选择集:selectAll("obj")，创建一个selection，这样我们可以往里面填充数据。不过现在的选择集还没有插入到文档，因为我们还要给这些空的选择集加入数据，
设置或获取一组元素的绑定数据：.data(dataset)，这样selection分配数据了，D3会根据数据来进行合理的分配，分配好了，这些selection下一步该插入到文档中了，
返回一个新的、绑定了数据的元素：.enter()， 这样子我们的之前创建的election就可以使用了。他们在DOM中有了自己的位置，我们终于可以往他身上进行操作了！
设置HTML属性：.attr()
设置CSS样式：.style()
D3.js学习记录【转】【新】的更多相关文章
- D3.js学习记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js学习记录 - 数据类型【转】【新】
1.变量 JAVASCRIPT的变量是一种类型宽松的语言.定义变量不用指定数据类型.而且还是动态可变的. var value = 100;value = 99.9999;value = false;v ...
- 我的three.js学习记录（三）
此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...
- 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总
习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...
- 我的three.js学习记录（二）
通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...
- vue.js学习记录
vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...
- D3.js学习（一）
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- D3.js学习（七）
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
- D3.js学习笔记（六）——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
随机推荐
- 常用Python第三方库 简介
如果说强大的标准库奠定了python发展的基石,丰富的第三方库则是python不断发展的保证,随着python的发展一些稳定的第三库被加入到了标准库里面,这里有6000多个第三方库的介绍:点这里或者访 ...
- Delphi 的接口机制——接口操作的编译器实现过程(2)
接口对象的内存空间 假设我们定义了如下两个接口 IIntfA 和 IIntfB,其中 ProcA 和 ProcB 将实现为静态方法,而 VirtA 和 VirtB 将以虚方法实现: IIntfA = ...
- git ssh认证
一般新手用git时,使用HTTPS都需要输入用户名和密码,这是一个很低效的开发过程.(虽然有时可以让开发人员减少push的次数).github提供了几种连接方式,其中以https:开头的代表https ...
- Xcode 真机测试破解方法（转加修改）xcode 4.3 通过
Xcode 真机测试破解方法(转加修改)xcode 4.3 通过 生成本机证书 应用程序->实用工具->钥匙串访问 菜单:钥匙串访问->证书助理->创建证书, 然后按以下图片顺 ...
- Oracle_系统和对象权限管理
授予系统权限: GRANT { system_privilege | role } [,{ system_privilege | role }]... ... TO {user | role | PU ...
- poj1665
#include <stdio.h> #include <stdlib.h> #define pi 3.1415926 int main() { float dia,tim; ...
- SICP 练习 （2.9）解决摘要：宽度和区间运算的关系间隔
SICP 2.9 像是一个数学题,要我们证明区间的和与差的宽度是被加和被减的区间的宽度的函数,而对于乘法和除法来说不成立. 书中所谓宽度就是区间起点和终点差的一半.以我看来更像是区间宽度的一半.无论怎 ...
- openvswitch安装、基本操作
一.安装,配置 //下载源码.编译.安装: #wget http://openvswitch.org/releases/openvswitch-2.3.0.tar.gz #tar -zxvf open ...
- 从一句SQL得出的启示
select count(*) + 1 from `table` where rank > (select rank from `table` where id = *) 上面那句SQL 给了我 ...
- Javascript 原型和原型链
先来了解一下Javascript中的原型:”原型也是一个对象,原型可以用来实现继承...“ 对于 原型,构造函数,以及实例之间的关系:“每个(构造)函数都有一个原型属性,原型对象都包含一个指向构造函数 ...