目标

　　在这一章，你将会使用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元素的更多相关文章

  1. D3.js学习笔记（四）—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  2. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  3. D3.js学习笔记（二）——使用绑定在DOM上的数据

    简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...

  4. d3.js学习笔记（五）——将数据结构化为D3.js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  5. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  6. tensorflow学习笔记三：实例数据下载与读取

    一.mnist数据 深度学习的入门实例,一般就是mnist手写数字分类识别,因此我们应该先下载这个数据集. tensorflow提供一个input_data.py文件,专门用于下载mnist数据,我们 ...

  7. Vue.js官方文档学习笔记(三)创建Vue实例

    创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...

  8. D3.js学习（三）

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  9. 精通D3.js学习笔记（2）比例尺和坐标

    1.线性比例尺 d3.scale.linear()   创建一个线性比例尺           .domain([0,500]) 定义域           .range([0,1000]) 值域 l ...

随机推荐

  1. 使用NSKeyedArichiver进行归档、NSKeyedUnarchiver进行解档

    一.使用archiveRootObject进行简单的归档 使用NSKeyedArichiver进行归档.NSKeyedUnarchiver进行接档,这种方式会在写入.读出数据之前对数据进行序列化.反序 ...

  2. 《Vim实用技巧》阅读笔记 --- 移动及跳转

    1.在对实际行的操作之前加上g,即可对屏幕行进行操作,例如:`gj`表示向下移动一个屏幕行,`g^`表示移动到屏幕行的第一个非空白字符等等 2.Vim有两组面向单词正向及反向移动的命令: w 正向移动 ...

  3. 3509.com 纵横天下虚拟主机,垃圾中的战斗机

    被纵横天下主机(3509.com)这间垃圾公司气疯了,他们公司自己要更换server(空间).居然把我挂在上面的站点数据弄丢了.并且更换连一封Email通知都没有.更离谱的是,跟他们反映这个情况后.他 ...

  4. 安全技能树简版 正式发布——BY 余弦（知道创宇）

    之前留意到知道创宇发布的<知道创宇研发技能表>,对自己有很大的启发,最近听说知道创宇的余弦大神创业了(题外话),还发布了<安全技能树简版V1>,仔细研读之后总体感觉不那么复杂了 ...

  5. Linux环境安装nodejs

    安装node 去官网下载nodejs 根据下载的文件可以看出它的压缩方式是.xz的方式,所以不能直接使用linux命令tar直接下载. xz -d node-v10.6.0-linux-x64.tar ...

  6. java 多线程 day01 创建线程

    线程,即代码的执行路径java 面向对象编程.所以线程在java中也是用对象来表示的,创建线程对象的类就是 Thread如下代码即开启一个新的线程,通过线程对象的start方法,即可启动线程 Thre ...

  7. linux环境变量配置文件

    环境变量配置文件中主要是定义对系统操作环境生效的系统默认环境变量,如PATH等.当你登陆Linux系统启动一个bash shell时,默认情况下bash会几个文件中查找命令,bash检查的启动文件取决 ...

  8. beego——XSRF过滤

    跨站请求伪造,简称XSRF,是Web应用中常见的一个安全问题. 当前防范 XSRF 的一种通用的方法,是对每一个用户都记录一个无法预知的token数据, 然后要求所有提交的请求(POST/PUT/DE ...

  9. JavaScript：关闭当前页面（微信、电脑）

    WeixinJSBridge.call('closeWindow'); // 关闭微信浏览器 window.opener=null; window.open('','_self'); window.c ...

  10. Java面向对象—抽象类和接口

    本文引用海子的一篇文章:http://www.cnblogs.com/dolphin0520/p/3811437.html 一.抽象类 在了解抽象类之前,先来了解一下抽象方法.抽象方法是一种特殊的方法 ...