目标
在这一章，你将会使用D3.js，基于我们的数据来把SVG元素添加到网页中。这一过程包括：把数据绑定到元素上，然后在使用这些元素来可视化我们的数据。
注意：不同于前几章，我们从一个完整的代码开始，然后去一步步理解它，从这一章开始，我们将会从零开始构建我们的数据可视化。
我们的目标是使用这个数据集：
var circleRadii = [40,20,10];
然后用D3.js来将这个数据集进行数据可视化。
SVG的Circle元素
首先我们要知道的是SVG的Circle元素是什么？它是怎么定义的？
SVG的Circle元素是一个基本的SVG图形元素。基本图形元素（Basic shape element）是SVG中预定义的标准图形。注意：这些图形可以通过数学方式同样得到（这些在后面会看到）。目前，我们要用到的就是基本SVG图形元素。
圆形是通过使用SVG名词”circle“创建的。
在定义圆形circle SVG图形时，三个必不可少的属性必须被附加：
- cx-圆心的x坐标
- cy-圆心的y坐标
- r-圆的半径
创建一个 SVG元素 来控制（hold）SVG的元素
从下面这个初始页面开始：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
</head>
<body>
</body>
</html>
打开JavaScript控制台和元素查阅器。
然后把下面这段代码输入JavaScript控制台：
var circleRadii = [40,20,10];
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
上面的代码给出了数据集以及一个SVG元素，这个SVG元素用来hold我们即将添加进来的SVG圆形：
数据绑定到SVG圆形上
接下来要把数据绑定到我们的DOM元素，也就是我们的SVG圆形上。
回想我们在把数据绑定到DOM元素那一章，我们是这么把数据绑定到DOM元素上的：
var theData = [ 1, 2, 3 ]
var p = d3.select("body").selectAll("p")
.data(theData)
.enter()
.append("p")
.text("hello ");
在本章的情况下，我们要做如下几步：
- selectAll circle
- 绑定数据
- 选择虚.enter()选集
- 添加SVG的circle元素
代码如下：
1 var circleRadii = [40,20,10];
2
3 var svgContainer = d3.select("body").append("svg")
4 .attr("width",200)
5 .attr("height",200);
6
7 var circles = svgContainer.selectAll("circle")
8 .data(circleRadii)
9 .enter()
10 .append("circle");
于是，我们在页面上就添加了三个SVG的circle元素：
太棒了！尽管圆形还没有出现。这是因为我们还没有对每个圆形circle的属性进行初始化。
如果我们把所有D3.js声明放在一行JavaScript代码中，并通过console.log()函数运行：
var circleRadii = [40,20,10];
console.log(d3.select("body").append("svg").attr("width",200).attr("height",200).selectAll("circle").data(circleRadii).enter().append("circle"));
根据结果我们可以看到，我们的数据已经绑定到了SVG 圆形元素上了：
使用绑定的数据来更改SVG圆形
现在我们开始使用绑定的数据来更改SVG圆形。
回顾我们上一章的使用绑定到DOM元素的数据，我们是这样使用绑定数据的：
var theData = [ 1, 2, 3 ]
var p = d3.select("body").selectAll("p")
.data(theData)
.enter()
.append("p")
.text( function (d) { return d; } );
使用绑定数据的关键是一个JavaScript函数：
function (d) { return d; }
同样的，D3.js允许我们使用这个方程来更改SVG圆形的参数！也就是说，我们可以这么用：
circleRadii = [40,20,10];
var svgContainer = d3.select("body").append("svg")
.attr("width",600)
.attr("height",100);
var circles = svgContainer.selectAll("circle")
.data(circleRadii)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx",50)
.attr("cy",50)
.attr("r",function (d){return d;})
.style("fill","green");
正如你所看到的，我们给circle选集添加了属性。数据集中给出的是圆形半径值，因此我们使用D3.js更新了每一个SVG circle元素的r属性。
我们使用绑定数据来更改SVG圆形后，得到的结果是：
我们正在一步步靠近最终的目标。我们现在有了三个SVG circle元素，它们的半径对应了数据集中给出的数值。我们最后要做的事，就是根据SVG circle的数值来着色。
根据数值（data）设置SVG元素的样式
回顾前面的Adding an SVG Element 章节，我们使用D3.js的.style操作符来设置CSS样式属性。
D3.js允许我们在.style()操作符内部使用函数！也就是说，我们可以这样做：
circleRadii = [40,20,10];
var svgContainer = d3.select("body").append("svg")
.attr("width",600)
.attr("height",100);
var circles = svgContainer.selectAll("circle")
.data(circleRadii)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx",50)
.attr("cy",50)
.attr("r",function (d){return d;})
.style("fill",function (d){
var returnColor ;
if (d===40){returnColor = "green";
} else if (d===20){returnColor = "purple";
} else if (d===10){returnColor = "red";}
return returnColor;
});
上面JavaScript代码在JavaScript控制台上运行结果是：
Congratulations——你已经成功使用一个数据集中的数据创建了SVG元素，并设置了其样式！
D3.js学习笔记（三）——创建基于数据的SVG元素的更多相关文章
-
D3.js学习笔记（四）—— 使用SVG坐标空间
目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...
-
D3.js学习笔记（一）——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
-
D3.js学习笔记（二）——使用绑定在DOM上的数据
简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...
-
d3.js学习笔记（五）——将数据结构化为D3.js可处理的
目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...
-
D3.js学习笔记（六）——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
-
tensorflow学习笔记三：实例数据下载与读取
一.mnist数据 深度学习的入门实例,一般就是mnist手写数字分类识别,因此我们应该先下载这个数据集. tensorflow提供一个input_data.py文件,专门用于下载mnist数据,我们 ...
-
Vue.js官方文档学习笔记(三)创建Vue实例
创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...
-
D3.js学习（三）
上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...
-
精通D3.js学习笔记（2）比例尺和坐标
1.线性比例尺 d3.scale.linear() 创建一个线性比例尺 .domain([0,500]) 定义域 .range([0,1000]) 值域 l ...
随机推荐
-
linux安装maven
一.下载maven 最新地址在:http://maven.apache.org/download.cgi 我下载的是:apache-maven-3.3.9-bin.tar.gz,是已经编译好的包 解压 ...
-
为什么要继承ActionSupport？
struts2中的action可以继承ActionSupport,也可以不继承ActionSupport.不继承ActionSupport的情况只需要有一个方法,返回String,即可,记住,在继承A ...
-
使用Karma 来进行 JavaScript 测试
最近接触了一些新的前端开发知识,主要是利用AngularJS做single page application.我也借这个机会,花了几天时间了解了如何对javascript进行测试. 这里将介绍一些使用 ...
-
LeetCode----202. Happy Number(Java)
package isHappy202; /* * Write an algorithm to determine if a number is "happy". A happy n ...
-
JavaScript的this用法
1. 全局代码中的this this在全局上下文中,它的值是全局对象本身(Global Object),在浏览器中就是Window Object,如下图示. 看下面几个例子: //Global sc ...
-
XE6移动开发环境搭建之IOS篇（5）：解决Windows和虚拟机下Mac OSX的共享问题（有图有真相）
网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 在安装XE6 PAS ...
-
js正則表達式语法
1. 正則表達式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之同样的 ...
-
linux下进入root
baoyu@ubuntu:~$ sudo password root sudo: password: command not found baoyu@ubuntu:~$ sudo passwd roo ...
-
OCI下报出的数据库重账错
[2014-01-09 19:43:45.469220][22347888] Level 0 COCITOOL: Error - OCI_ERROE - errcode[1],errmsg[ORA-0 ...
-
Zepto源码分析-form模块
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...