目标

  在这一章,你将会使用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. 《挑战程序设计竞赛》2.4 数据结构-并查集 POJ1182 2236 1703 AOJ2170

    POJ1182 http://poj.org/problem?id=1182 题目 难得的中文题... 食物链 Time Limit: 1000MS Memory Limit: 10000K Tota ...

  2. 服务器端Session和客户端Session(和Cookie区别)

    Session其实分为客户端Session和服务器端Session. 当用户首次与Web服务器建立连接的时候,服务器会给用户分发一个 SessionID作为标识.SessionID是一个由24个字符组 ...

  3. 笔记-django学习链接

    form表单学习 https://www.cnblogs.com/weiman3389/p/6225075.html python字符串replace()方法 https://www.cnblogs. ...

  4. WSGI基础知识(转)

    add by zhj: WSGI全称Web Server Gateway Interface,即Web网关接口.其实它并不是OSI七层协议中的协议,它就是一个接口(即函数)而已,而WSGI规定了该接口 ...

  5. Linux内核协议栈相关资料链接

    1.Linux内核网络分析(个人博客集合,分析较清晰) http://blog.csdn.net/qy532846454/article/category/1385933/2

  6. 【转】如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源

    网上看到关于微信官方的跨平台跨业务的终端基础组件Mars的介绍文章,转载这这里.源代码: https://github.com/Tencent/mars作者:男人链接:https://zhuanlan ...

  7. Pytorch(一)

    一.Pytorch介绍 Pytorch 是Torch在Python上的衍生物 和Tensorflow相比: Pytorch建立的神经网络是动态的,而Tensorflow建立的神经网络是静态的 Tens ...

  8. 关于c#继承

    如下代码所示:最后输出的是:8,3,7,4 public class A { public virtual void One(int i) { Console.Write(i); } public v ...

  9. rtsp over udp

    #include <stdio.h> #include <netinet/in.h> #include <sys/socket.h> #include <st ...

  10. Java io流详解二

    原文地址https://www.cnblogs.com/xll1025/p/6418766.html 一.IO流概述 概述: IO流简单来说就是Input和Output流,IO流主要是用来处理设备之间 ...