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

来源：互联网发布：java jar包日志输出编辑：程序博客网时间：2024/05/20 06:26

http://www.sxt.cn/u/2839/blog/4321

目标

　　在这一章，你将会使用D3.js，基于我们的数据来把SVG元素添加到网页中。这一过程包括：把数据绑定到元素上，然后在使用这些元素来可视化我们的数据。

　　注意：不同于前几章，我们从一个完整的代码开始，然后去一步步理解它，从这一章开始，我们将会从零开始构建我们的数据可视化。

　　我们的目标是使用这个数据集：

1
1var circleRadii = [40,20,10];

　　然后用D3.js来将这个数据集进行数据可视化。

visualization

SVG的Circle元素

　　首先我们要知道的是SVG的Circle元素是什么？它是怎么定义的？

　　SVG的Circle元素是一个基本的SVG图形元素。基本图形元素（Basic shape element）是SVG中预定义的标准图形。注意：这些图形可以通过数学方式同样得到（这些在后面会看到）。目前，我们要用到的就是基本SVG图形元素。

　　圆形是通过使用SVG名词”circle“创建的。

　　在定义圆形circle SVG图形时，三个必不可少的属性必须被附加：

cx-圆心的x坐标
cy-圆心的y坐标
r-圆的半径

创建一个 SVG元素来控制（hold）SVG的元素

　　从下面这个初始页面开始：

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

　　打开JavaScript控制台和元素查阅器。

　　然后把下面这段代码输入JavaScript控制台：

1
2
3
4
5
1var circleRadii = [40,20,10];
2
3var svgContainer = d3.select("body").append("svg")
4                                    .attr("width",200)
5                                    .attr("height",200);

　　上面的代码给出了数据集以及一个SVG元素，这个SVG元素用来hold我们即将添加进来的SVG圆形：

SVG element

数据绑定到SVG圆形上

　　接下来要把数据绑定到我们的DOM元素，也就是我们的SVG圆形上。

　　回想我们在把数据绑定到DOM元素那一章，我们是这么把数据绑定到DOM元素上的：

1
2
3
4
5
6
7
1var theData = [ 1,2,3]
2
3var p = d3.select("body").selectAll("p")
4  .data(theData)
5  .enter()
6  .append("p")
7  .text("hello ");

　　在本章的情况下，我们要做如下几步：

selectAll circle
绑定数据
选择虚.enter()选集
添加SVG的circle元素

　　代码如下：

1
2
3
4
5
6
7
8
9
10
1var circleRadii = [40,20,10];
 2
 3var svgContainer = d3.select("body").append("svg")
 4                                    .attr("width",200)
 5                                    .attr("height",200);
 6
 7var circles = svgContainer.selectAll("circle")
 8                          .data(circleRadii)
 9                          .enter()
10                          .append("circle");

　　于是，我们在页面上就添加了三个SVG的circle元素：

3_circle

　　太棒了！尽管圆形还没有出现。这是因为我们还没有对每个圆形circle的属性进行初始化。

　　如果我们把所有D3.js声明放在一行JavaScript代码中，并通过console.log()函数运行：

1
2
3
1var circleRadii = [40,20,10];
2
3console.log(d3.select("body").append("svg").attr("width",200).attr("height",200).selectAll("circle").data(circleRadii).enter().append("circle"));

　　根据结果我们可以看到，我们的数据已经绑定到了SVG 圆形元素上了：

bound to circles

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

　　现在我们开始使用绑定的数据来更改SVG圆形。

　　回顾我们上一章的使用绑定到DOM元素的数据，我们是这样使用绑定数据的：

1
2
3
4
5
6
7
1var theData = [ 1,2,3]
2
3var p = d3.select("body").selectAll("p")
4  .data(theData)
5  .enter()
6  .append("p")
7  .text( function (d) { returnd; } );

　　使用绑定数据的关键是一个JavaScript函数：

1
1function (d) { returnd; }

　　同样的，D3.js允许我们使用这个方程来更改SVG圆形的参数！也就是说，我们可以这么用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1circleRadii = [40,20,10];
 2
 3var svgContainer = d3.select("body").append("svg")
 4                                                           .attr("width",600)
 5                                                           .attr("height",100);
 6
 7var circles = svgContainer.selectAll("circle")
 8                                         .data(circleRadii)
 9                                         .enter()
10                                         .append("circle");
11
12var circleAttributes = circles
13                                  .attr("cx",50)
14                                  .attr("cy",50)
15                                  .attr("r",function (d){returnd;})
16                                  .style("fill","green");

　　正如你所看到的，我们给circle选集添加了属性。数据集中给出的是圆形半径值，因此我们使用D3.js更新了每一个SVG circle元素的r属性。

　　我们使用绑定数据来更改SVG圆形后，得到的结果是：

SVG circles

　　我们正在一步步靠近最终的目标。我们现在有了三个SVG circle元素，它们的半径对应了数据集中给出的数值。我们最后要做的事，就是根据SVG circle的数值来着色。

根据数值（data）设置SVG元素的样式

　　回顾前面的Adding an SVG Element 章节，我们使用D3.js的.style操作符来设置CSS样式属性。

　　D3.js允许我们在.style()操作符内部使用函数！也就是说，我们可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1circleRadii = [40,20,10];
 2
 3var svgContainer = d3.select("body").append("svg")
 4                                    .attr("width",600)
 5                                                           .attr("height",100);
 6
 7var circles = svgContainer.selectAll("circle")
 8                          .data(circleRadii)
 9                          .enter()
10                          .append("circle");
11
12var circleAttributes = circles
13                       .attr("cx",50)
14                       .attr("cy",50)
15                       .attr("r",function (d){returnd;})
16                       .style("fill",function (d){
17                         var returnColor ;
18                         if (d===40){returnColor = "green";
19                         } elseif (d===20){returnColor = "purple";
20                         } elseif (d===10){returnColor = "red";}
21                         return returnColor;
22                         });

　　上面JavaScript代码在JavaScript控制台上运行结果是：

we did it

　　Congratulations——你已经成功使用一个数据集中的数据创建了SVG元素，并设置了其样式！

0 0