目标

　　在这一章，你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上。

　　我们的目标就是使用下面的数据集：

 var spaceCircles = [30,70,110];

　　并使用D3.js来对这些数据进行可视化：

数学/图形 坐标空间(Mathematical/Graph Coordinate Space)

　　在我们使用D3.js基于一些数据把SVG元素添加到指定的坐标位置之前，我们先来讨论下坐标空间。

　　我们了解一些基础数学中的基础数学图形(mathematical graphs).

　　这些图形都是画在长方形的、二维平面空间。

　　这些图形的坐标空间中，x=0,y=0的坐标都是位于左下方。

　　

　　这些图的X坐标轴是有左向右递增。

　　这些图的Y坐标轴是右下向上递增。

　　也就说，当我们想画一个坐标为x=30，y=30的圆，我们只要从左下方向右走30个单位，然后再向上走30个单位，就到了目的地。

　　

　SVG坐标空间

　　SVG坐标空间与数学图形坐标空间原理基本一样，除了下面两点：

　　1-SVG坐标空间中，x=0以及y=0的坐标是在左上方。

　　2-SVG坐标空间中，Y坐标轴的增长方式是自上而下。

　　

　　也就是说，随着Y值变大，坐标位置是向下移动的，而不是向上。

　　因此，当我们说在SVG坐标空间里画一个圆，圆心是x=30，y=30，那就要从左上方出发，向右走30单位，然后向下走30单位。

.append('svg')：添加一个坐标空间

　　当我们创建一个D3.js的可视化，我们一直使用的代码是：

 var svgContainer = d3.select("body").append("svg")

                                     .attr("width",200)

                                     .attr("width",200);

　　上面的代码为我们创建了下面的HTNL SVG元素：

　　

　　到目前为止，我们一直忽略不去探讨SVG元素。No longer！

　　我们可以把SVG元素看做是一个宽200单位，高200单位的图（graph）。

　　通过在上面的“SVG坐标空间”中，我们了解了X和Y轴的0点是在左上方。

　　现在，我们也知道了，随着Y坐标增大，坐标是从坐标空间自上而下移动。

　　为了更清楚的看到，我们对SVG元素设置如下设置其样式：

 var svgContainer = d3.select("body").append("svg")

                                     .attr("width",200)

                                     .attr("height",200)

                                     .style("border","1px solid black");

　　结果是：

　　

　　通过上面得到的结果，有利于我们在数据可视化的时候，更好的使用逆序的Y坐标系统。

把SVG元素布局在SVG坐标空间

　　我们可以用下面的代码，添加一个SVG圆形元素：

 <svg width="50" height="50">

   <circle cx="25" cy="25" r="25" fill="purple" />

 </svg>

　　cx代表圆心是在SVG上自左向右移动25单位。

　　cy代表圆心是在SVG上自上而下移动25单位。

　　回顾我们使用D3.js创建SVG圆形：

 var circleSelection = svgSelection.append("circle")

                                   .attr("cx",25)

                                   .attr("cy",25)

                                   .attr("r",25)

                                   .style("fill","purple");

　　其中，.attr("cx",25)和.attr("cy",25)让我们可以设置SVG圆形的属性。

　　正如我们在前一章看到的，我么可以动态的（programmatically）设置这些属性：

 var circleAttributes = circles

                        .attr("cx", 50)

                        .attr("cy", 50)

                        .attr("r", function (d) { return d; });

　　但是这一次，我们不是在“半径”r属性内使用函数，而是在cx和cy属性中使用函数。

创建一个SVG元素来持有SVG的元素

　　依然是从这个基础页面开始：

 <!DOCTYPE html>

 <html>

   <head>

     <script type="text/javascript" src="d3.v2.min.js"></script>

   </head>

   <body>

   </body>

 </html>

　　我们还是使用Chrome浏览器，进入开发者工具模式。

　　在JavaScript控制台输入代码：　

 var spaceCircles = [30,70,110];

 var svgContainer = d3.select("body").append("svg")

 　　　　　　　　　　　　　　　　　　　　　.attr("width",200)

 　　　　　　　　　　　　　　　　　　　　  .attr("height",200);

　　上面的代码定义了数据集，以及用来持有SVG圆形元素的SVG元素：

把数据绑定到SVG圆形元素

　　接下来我们要把数据绑定到SVG圆形元素上：

 var spaceCircles = [30, 70, 110];

 var svgContainer = d3.select("body").append("svg")

                                     .attr("width", 200)

                                     .attr("height", 200);

 var circles = svgContainer.selectAll("circle")

                           .data(spaceCircles)

                           .enter()

                           .append("circle");

　　我们在页面上添加了三个SVG的圆形元素：

使用绑定的数据来更改SVG圆形的坐标

　　现在已经把数据绑定到了SVG的圆形元素上，我们可以使用这些数据来设置x坐标和y坐标。

　　D3.js允许我们在“cx”和“cy”属性中使用函数：

 var spaceCircles = [30,70,110];

 var svgContainer = d3.select("body").append("svg")

 　　　　　　　　　　　　　　　　　　　　　.attr("width",200)

 　　　　　　　　　　　　　　　　　　　　　.attr("height",200);

 var circles = svgContainer.selectAll("circle")

 　　　　　　　　　　　　　　　.data(spaceCircles)

 　　　　　　　　　　　　　　　.enter()

 　　　　　　　　　　　　　　　.append("circle");

 var circleAttributes = circles

 　　　　　　　　　　　　　　.attr("cx",function(d){return d;})

 　　　　　　　　　　　　　　.attr("cy",function(d){return d;})

 　　　　　　　　　　　　　　.attr("r",20);

　　结果是：

　　现在我们离目标和很近了，我们已经使用了数据集中的坐标值创建了三个SVG circle元素。最后要做的事，就是根据数据来对SVG圆形着色。

回顾——依据数据设置SVG元素的样式

　　如果你还记得我们前面“根据数据创建SVG元素”章节的话，在那里我们使用绑定数据更改SVG元素的样式。

　　正如我们之前看到的，D3.js允许我们在.style()操作符内部使用函数——这意味着我们可以这么写代码：

 var spaceCircles = [30,70,110];

 var svgContainer = d3.select("body").append("svg")

   　　　　　　　　　　　　　　　　　　　　　.attr("width",200)

   　　　　　　　　　　　　　　　　　　　　　.attr("height",200);

 var circles = svgContainer.selectAll("circle")

   　　　　　　　　　　　　　　　.data(spaceCircles)

   　　　　　　　　　　　　　　　.enter()

  　　　　　　　　　　　　　　　 .append("circle");

12 var circleAttributes = circles

  　　　　　　　　　　　　　　.attr("cx",function(d){return d;})

  　　　　　　　　　　　　　　.attr("cy",function(d){return d;})

  　　　　　　　　　　　　　　.attr("r",20)

                          .style("fill",function(d){

 　　　　　　　　　　　　　　　　　　　　var returnColor;

 　　　　　　　　　　　　　　　　　　　　if(d===30){returnColor = "green";

 　　　　　　　　　　　　　　　　　　　　}else if(d===70){returnColor = "purple";

 　　　　　　　　　　　　　　　　　　　　}else if(d===110){returnColor = "red";}

 　　　　　　　　　　　　　　　　　　　　return returnColor;

 　　　　　　　　　　　　　　　　　　　　});

　　在JavaScript控制台中运行后的结果是：

Congratulations - You created, styled, and placed SVG elements in the SVG Coordinate Space based on data from a data set!噢耶~~

D3.js学习笔记（四）—— 使用SVG坐标空间的更多相关文章

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

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

  2. D3.js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

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

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

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

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

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

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

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

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

  7. 精通D3.js学习笔记（1）基础的函数

    买了本吕大师的d3可视化.最近来学习一下,做个笔记.   1.选择元素  select(第一元素) 和selectAll(全部的元素)      类似css的选择器.也可以是dom选中的. var i ...

  8. D3.js学习（四）

    上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...

  9. JS学习笔记 (四) 数组进阶

    1.基本知识 1.数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始. 2.数组是无类型的.数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的 ...

随机推荐

  1. Setting IE11 with Group Policy Preferences

    一.Setting Home Page with Group Policy Preferences 1.Open the Group Policy Management Console and cre ...

  2. 6.javaScript中的二维数组

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. python类的相关知识第二部分

    类的继承.多态.封装 一.类的继承 1.应用场景: 类大部分功能相同,大类包含小类的情况 例如: 动物类 共性:都要吃喝拉撒.都有头有脚 特性: 猫类.走了很轻,叫声特别,喜欢白天睡觉 狗类.的叫声很 ...

  4. mac本配置python环境

    mac本上一般是自带python解释器的. 我选择了SublimeText2作为编辑器.安装个SublimeCodeIntel插件,可以进行代码自动补全. 新建一个python文件:hello.py ...

  5. Linux（6）- redis发布订阅/持久化/主从复制/redis-sentinel/redis-cluster、nginx入门

    一.redis发布订阅 Redis 通过 PUBLISH .SUBSCRIBE 等命令实现了订阅与发布模式. 其实从Pub/Sub的机制来看,它更像是一个广播系统,多个Subscriber可以订阅多个 ...

  6. Android 屏幕切换动画

    public void overridePendingTransition (int enterAnim, int exitAnim) Call immediately after one of th ...

  7. tomcat 是如何处理jsp和servlet请求

    我们以一个具体的例子,来跟踪TOMCAT, 看看它是如何把Request一层一层地递交给下一个容器, 并最后交给Wrapper来处理的. 以http://localhost:8080/web/logi ...

  8. java-序列化-001-原生介绍

    一.什么是对象序列化 java平台允许我们在内存中创建可复用的Java对象,但一般情况下,只有当JVM处于运行时,这些对象才可能存在,即,这些对象的生命周期不会比JVM的生命周期更长.但在现实应用中, ...

  9. 玩玩nmap

    ---恢复内容开始--- [root@miyan ~]# nmap -v Starting Nmap 7.12 ( https://nmap.org ) at 2016-04-04 15:34 CST ...

  10. Ubuntu学习笔记3-图书知识点总结

    免费的虚拟机软件:vmware server Ubuntu下切换到root用户: 1,su 2, sudo -s 3, sudo+命令 Ubuntu下切换到一般用户: su chennan 软件包的安 ...