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

时间 2019-12-14

标签 d3.js 学习笔记使用 svg 坐标空间栏目 JavaScript 繁體版

原文原文链接

目标javascript

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

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

1 var spaceCircles = [30,70,110];

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

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

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

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

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

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

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

　　这些图的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的可视化，咱们一直使用的代码是：

1 var svgContainer = d3.select("body").append("svg")
2                                     .attr("width",200)
3                                     .attr("width",200);

　　上面的代码为咱们建立了下面的HTNL SVG元素：

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

　　咱们能够把SVG元素看作是一个宽200单位，高200单位的图（graph）。

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

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

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

1 var svgContainer = d3.select("body").append("svg")
2                                     .attr("width",200)
3                                     .attr("height",200)
4                                     .style("border","1px solid black");

　　结果是：

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

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

　　咱们能够用下面的代码，添加一个SVG圆形元素：

1 <svg width="50" height="50">
2   <circle cx="25" cy="25" r="25" fill="purple" />
3 </svg>

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

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

　　回顾咱们使用D3.js建立SVG圆形：

1 var circleSelection = svgSelection.append("circle")
2                                   .attr("cx",25)
3                                   .attr("cy",25)
4                                   .attr("r",25)
5                                   .style("fill","purple");

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

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

1 var circleAttributes = circles
2                        .attr("cx", 50)
3                        .attr("cy", 50)
4                        .attr("r", function (d) { return d; });

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

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

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

1 <!DOCTYPE html>
2 <html>
3   <head>
4     <script type="text/javascript" src="d3.v2.min.js"></script>
5   </head>
6   <body>
7   </body>
8 </html>

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

　　在JavaScript控制台输入代码：　

1 var spaceCircles = [30,70,110];
2 
3 var svgContainer = d3.select("body").append("svg")
4 　　　　　　　　　　　　　　　　　　　　　.attr("width",200)
5 　　　　　　　　　　　　　　　　　　　　  .attr("height",200);

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

把数据绑定到SVG圆形元素

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

 1 var spaceCircles = [30, 70, 110];
 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(spaceCircles)
 9                           .enter()
10                           .append("circle");

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

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

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

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

 1 var spaceCircles = [30,70,110];
 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(spaceCircles)
 9 　　　　　　　　　　　　　　　.enter()
10 　　　　　　　　　　　　　　　.append("circle");
11 
12 var circleAttributes = circles
13 　　　　　　　　　　　　　　.attr("cx",function(d){return d;})
14 　　　　　　　　　　　　　　.attr("cy",function(d){return d;})
15 　　　　　　　　　　　　　　.attr("r",20);

　　结果是：

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

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

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

　　正如咱们以前看到的，D3.js容许咱们在.style()操做符内部使用函数——这意味着咱们能够这么写代码：

 1 var spaceCircles = [30,70,110];
 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(spaceCircles)
 9   　　　　　　　　　　　　　　　.enter()
10  　　　　　　　　　　　　　　　 .append("circle");
11  
12 var circleAttributes = circles
13  　　　　　　　　　　　　　　.attr("cx",function(d){return d;})
14  　　　　　　　　　　　　　　.attr("cy",function(d){return d;})
15  　　　　　　　　　　　　　　.attr("r",20)
16                          .style("fill",function(d){
17 　　　　　　　　　　　　　　　　　　　　var returnColor;
18 　　　　　　　　　　　　　　　　　　　　if(d===30){returnColor = "green";
19 　　　　　　　　　　　　　　　　　　　　}else if(d===70){returnColor = "purple";
20 　　　　　　　　　　　　　　　　　　　　}else if(d===110){returnColor = "red";}
21 　　　　　　　　　　　　　　　　　　　　return returnColor;
22 　　　　　　　　　　　　　　　　　　　　});

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

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