目标
在这一章，你将要使用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坐标空间的更多相关文章
-
D3.js学习笔记（六）——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
-
D3.js学习笔记（三）——创建基于数据的SVG元素
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
-
精通D3.js学习笔记（2）比例尺和坐标
1.线性比例尺 d3.scale.linear() 创建一个线性比例尺 .domain([0,500]) 定义域 .range([0,1000]) 值域 l ...
-
d3.js学习笔记（五）——将数据结构化为D3.js可处理的
目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...
-
D3.js学习笔记（二）——使用绑定在DOM上的数据
简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...
-
D3.js学习笔记（一）——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
-
精通D3.js学习笔记（1）基础的函数
买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var i ...
-
D3.js学习（四）
上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...
-
Node.js学习笔记(四) --- fs模块的使用
目录 . fs.stat 检测是文件还是目录 . fs.mkdir 创建目录 . fs.writeFile 创建写入文件 . fs.appendFile 追加文件 . fs.readFile 读取文件 ...
随机推荐
-
backbonejs中的模型篇(二）
一:模型标识符 每个模型都有一个用作唯一标识符的ID属性,以便在不同模型间进行区分.通过id属性我们可以直接访问模型对象当中用于标识符存放的属性,默认属性名为id,但也可以通过设置idAttribut ...
-
android sqlite支持的数据类型
Sqlite3支持的数据类型 :NULL.INTEGER.REAL.TEXT.BLOB 但实际上,sqlite3也接受如下的数据类型: smallint 16 位元的整数. interge ...
-
【iScroll源码学习01】准备阶段 - 叶小钗
[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文 http://www.cnblogs.com/yexiaochai/p/3 ...
-
使用千位分隔符(逗号)表示web网页中的大数字
做手机端页面我们常常遇到数字,而在Safari浏览器下这些数字会默认显示电话号码,于是我们就用到了补坑的方法加入<meta>标签: <meta name="format-d ...
-
vue学习之父组件与子组件之间的交互
1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...
-
Java多线程与并发编程学习
一.线程三大特性 多线程有三大特性,原子性.可见性.有序性 1.1 什么是原子性 即一个操作或者多个操作 要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行.一个很经典的例子就是银行账户转账 ...
-
解决angularjs 在ie8上面 ng-repeat的select控件兼容性问题
问题描述: 在ie8下生成select的option时候使用ng-repeat,会造成下拉列表的列表显示值为{{x.displayname}}的形式,但是选中之后,选中值却又是正确的,此问题不在chr ...
-
各种异常 及异常类和Object类
Day05 异常 Object类 equals方法,用于比较两个对象是否相同,它其实就是使用两个对象的内存地址在比较.Object类中的equals方法内部使用的就是==比较运算符. 2. 描述人这个 ...
-
windows下载mysql5.7压缩包配置安装mysql
windows安装mysql5.7有两种方式 1.下载.msi安装文件直接根据界面提示进行安装 2.下载.biz或.zip压缩包 注:本次在win10系统下使用压缩包进行安装mysql5.7 mysq ...
-
图解HTTP阅读笔记（1）-网络基础TCP/IP
1.TCP/IP协议族 TCP/IP这个概念对大家来说很熟悉,之前我的了解它只是一个协议.今天阅读才知道TCP/IP实际上是一个协议族,其中HTTP协议属于该协议族的一个子集.图1是TCP/IP协议族 ...