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 div{
background-color: #3498db;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
} </style> <script src="/javascripts/d3js/d3.v3.js"></script>
<script src="/javascripts/d3js/jsonData3.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)
.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)，这样“空房子”分配“家具”了，D3会根据数据来进行合理的分配，分配好了，这些家具下一步是不是该搬进这些小房子了呢？
返回一个新的、绑定了数据的元素：.enter()， 这样子我们的之前创建的房子就可以使用了。他们在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 ...
- 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总
习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...
- 我的three.js学习记录（二）
通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...
- 我的three.js学习记录（三）
此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...
- vue.js学习记录
vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...
- D3.js学习（一）
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- D3.js学习笔记（六）——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- d3.js学习笔记（五）——将数据结构化为D3.js可处理的
目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...
随机推荐
- 利用firebug调试功能辅助了解闭包和this
算一算,有段时间没写博客. 上午的时候翻看以前收藏的一个系列博文<深入理解javascript原型和闭包>, 讲闭包那节:http://www.cnblogs.com/wangfupeng ...
- Makefile 编写 tips
1.变量赋值 VARIABLE = value #在执行时扩展,允许递归扩展 VARIABLE := value #在定义时扩展 VARIABLE ?= value #只有在该变量为空时才设置该值 V ...
- Java程序设计之线程池应用
这里简单说一个线程池的小应用,从控制台输入线程访问的线程数量,输出输出工作的线程名,之前先构造一个包含了5条线程的对象. 代码: import java.util.Scanner; import ja ...
- WPF Popup 控件导致被遮挡内容不刷新的原因
WPF Popup 控件导致被遮挡内容不刷新的原因 周银辉 今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当popup关闭时,原来被popup挡住的界面部分不刷新,非要手动刷新一下(比 ...
- [CareerCup] 5.7 Find Missing Integer 查找丢失的数
5.7 An array A contains all the integers from 0 to n, except for one number which is missing. In thi ...
- 搭建TFS 2015 Build Agent环境(二)
在执行和安装配置的过程中,注意一定要使用管理员权限运行:ConfigureAgent.cmd 和RunAgent.cmd.配置的过程中,要注意几个内容:1.TFS地址不要写DefaultCollect ...
- ModernUI教程：创建自定义主题
Modern UI WPF包括两个内置主题(dark与light).在1.0.3版本,您可以构建自定义的主题.Modern UI应用程序通常有在全局资源字典App.xaml中有如下定义 ...
- 尝试使用Memcached遇到的狗血问题
乘着有时间,尝试下利用Memcached进行分布式缓存,其中遇到了不少问题及狗血的事情,开篇记录下,希望对您有帮助. 我之前的项目为:Asp.Net MVC4 + Nhibernate + MSSQL ...
- UML类图关系（泛化 、继承、实现、依赖、关联、聚合、组合）
UML类图关系(泛化 .继承.实现.依赖.关联.聚合.组合) 继承.实现.依赖.关联.聚合.组合的联系与区别 分别介绍这几种关系: 继承 指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父 ...
- AD_TLC549采集模拟信号
AD_TLC549采集模拟信号 实验原理 芯片介绍 TLC549是 TI公司生产的一种低价位.高性能的8位A/D转换器,它以8位开关电容逐次逼近的方法实现 A/D转换,其转换速度小于 17us,最大转 ...