目标

　　在这一章，你将要使用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. 模块化之SeaJS(一)

    模块化(之SeaJS) 刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?怎么样实现模块化呢? 不要急,博主正是带着这三个问题来写这篇文章的. 一,什么是模块化? 在前端开发领域,一 ...

  2. 第16章—日志（slf4j&logback）

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  3. rest_framework之url控制器详解

    一 自定义路由(原始方式) from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^books/ ...

  4. 【我的Android进阶之旅】Android调用JNI出错 java.lang.UnsatisfiedLinkError: No implementation found for的解决方法

    错误描述 今天使用第三方的so库时候,调用JNI方法时出现了错误.报错如下所示: 11-01 16:39:20.979 4669-4669/com.netease.xtc.cloudmusic E/a ...

  5. Android学习九---OpenCV4android org.opencv.feature2d

    不管是在识别,配准等应用中,提取图像的特征都是很关键的一环,提取特征是先找出图像的关键点(如角点,边缘点等),然后用描述子来描述这些点,最后整幅图像就可以表示成一个特征向量,特征向量就可以利用在后续识 ...

  6. SAP 后台job

    SAP 如何定义后台job 有两种方 1是se38执行可执行程序后,菜单栏‘程序’--->'后台执行',输入输出设备,ENTER两次后,选择开始时间(立刻执行,或定义日期时间,也可周期执行..) ...

  7. ansible安装及使用

    一.ansible介绍 1.ansible简介 官方的title是“Ansible is Simple IT Automation”——简单的自动化IT工具. Ansible跟其他IT自动化技术的区别 ...

  8. Django——认证系统（Day72）

    阅读目录 COOKIE 与 SESSION 用户认证 COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因 ...

  9. springmvc国际化资源文件

    spring配置文件中添加 <!-- 配置国际化资源文件 --> <bean id="messageSource" class="org.springf ...

  10. hadoop09----线程池

    java并发包 1.java并发包介绍 线程不能无限制的new下去,否则系统处理不了的. 使用线程池.任务来了就开一runable对象. concurrent 包开始不是jdk里面的,后来加入到jd ...