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

目标

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

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

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

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

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

 

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 <!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 var circleRadii = [40,20,10];
2 
3 var svgContainer = d3.select("body").append("svg")
4                                     .attr("width",200)
5                                     .attr("height",200);

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

数据绑定到SVG圆形上

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

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

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

 

   在本章的情况下,我们要做如下几步:

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

  代码如下:

 1 var circleRadii = [40,20,10];
 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(circleRadii)
 9                           .enter()
10                           .append("circle");

 

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

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

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

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

 

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

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

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

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

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

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

1 function (d) { return d; }

 

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

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

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

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

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

 

根据数值(data)设置SVG元素的样式

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

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

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

 

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

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。