d2.js学习笔记(七)——动态SVG坐标空间

目标

  在这一章,我们将学习如何使SVG坐标空间是动态的,这样我们的数据可视化不论数据是什么,都始终是可见的。

  我们会使得SVG坐标空间尺度上调或下调来适于我们的数据。

三个SVG长方形

  我们就从三个长方形作为开始:

 1   var jsonRectangles = [
 2     { "x_axis": 10, "y_axis": 10, "height": 20, "width":20, "color" : "green" },
 3     { "x_axis": 40, "y_axis": 40, "height": 20, "width":20, "color" : "purple" },
 4     { "x_axis": 70, "y_axis": 70, "height": 20, "width":20, "color" : "red" }];
 5
 6   var svgContainer = d3.select("body").append("svg")
 7                                    .attr("width", 100)
 8                                    .attr("height", 100);
 9
10   var rectangles = svgContainer.selectAll("rect")
11                             .data(jsonRectangles)
12                             .enter()
13                             .append("rect");
14
15   var rectangleAttributes = rectangles
16                          .attr("x", function (d) { return d.x_axis; })
17                          .attr("y", function (d) { return d.y_axis; })
18                          .attr("height", function (d) { return d.height; })
19                          .attr("width", function (d) { return d.width; })
20                          .style("fill", function(d) { return d.color; });

  得到的结果是:

  漂亮!

  其中SVG容器:

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

宽100单位,高100单位。

  也就是说,图中三个长方形中最右下角的点的坐标(90,90)仍然在SVG容器视窗范围内。

  但是,如果紫色的长方形的x坐标,突然增加了四倍,从40变成160,结果会怎么样呢?

 1   //原来
 2   { "x_axis": 40, "y_axis": 40, "height": 20, "width":20, "color" : "purple" }
 3
 4   //变为
 5   { "x_axis": 160, "y_axis": 40, "height": 20, "width":20, "color" : "purple" }
 6
 7   //因此,数据集 jsonRectangles 变成了:
 8   var jsonRectangles = [
 9   { "x_axis": 10, "y_axis": 10, "height": 20, "width":20, "color" : "green" },
10   { "x_axis": 160, "y_axis": 40, "height": 20, "width":20, "color" : "purple" },
11   { "x_axis": 70, "y_axis": 70, "height": 20, "width":20, "color" : "red" }];

  这也就是说,紫色长方形有坐标值(160,40)。

  这个坐标已经超出高100宽100的范围。

  这样我们的数据可视化结果成了:

  就像我们想象的那样,太糟了!

动态调整SVG容器空间

  我们真正需要的是,能够根据我们的数据,对SVG容器的width、height属性进行动态调节。

  我们打算使用基础JavaScript循环(loop)来对JSON对象数组处理,找出最大的X坐标he最大的Y坐标。

  最大的x坐标和最大的y坐标就是长方形的最右下角点的坐标。

 1 //新的jsonRectangle数据(其中紫色长方形的x坐标现在是160)
 2 var jsonRectangles = [
 3 {"x_axis":10,"y_axis":10,"height":20,"width":20,"color":"green"},
 4 {"x_axis":160,"y_axis":40,"height":20,"width":20,"color":"purplr"},
 5 {"x_axis":70,"y_axis":70,"height":20,"width":20,"color":"red"}
 6 ];
 7 
 8 var max_x = 0;//用于存储最大x坐标
 9 var max_y = 0;//用于存储最大y坐标
10 
11 //在jsonRectangle数组上的循环
12 for(var i = 0;i<jsonRectangles.length;i++){
13 var temp_x,temp_y;
14 
15 //为了得到最右的点,我们需要把x坐标和width相加
16 temp_x = jsonRectangles[i].x_axis+jsonRectangles[i].width;
17 
18 //为了得到最下面的点,我们需要把y坐标和height相加
19 temp_y = jsonRectangles[i].y_axis+jsonRectangles[i].height;
20 
21 /**
22 *如果临时x坐标比max_x大,
23 *那么就让max_x等于temp_x
24 *否则,什么都不用做
25 *同理,max_y也一样
26 */
27 if(temp_x>=max_x){
28   max_x = temp_x;  
29 }
30 
31 if(temp_y>=max_y){
32   max_y = temp_y;  
33 }
34 
35 }//循环停止
36 
37 max_x;
38 //返回180
39 
40 max_y;
41 //返回 90

  如果数据发生了变化,max_x和max_y将始终都是数据中的最大值。

  现在,我们可以更新我们的SVG容器:

 1 //原来
 2 var svgContainer = d3.select("body").append("svg")
 3 .attr("height",200)
 4 .attr("width",200);
 5 
 6 //现在(使用变量max_x和max_y)
 7 var svgContainer = d3.select("body").append("svg")
 8 .attr("width",max_x + 20)
 9 .attr("width",max_x + 20);
10 //注意 — 在这里给max_x和max_y各加了20,是为了给元素多一些文本空间

  这样,SVG容器就一直能够显示右边的最大尺寸,我们的数据也就能正确的出现在其内部。

成品

  既然问题解决了,完整的代码如下:

 1   var jsonRectangles = [
 2     { "x_axis": 10, "y_axis": 10, "height": 20, "width":20, "color" : "green" },
 3     { "x_axis": 160, "y_axis": 40, "height": 20, "width":20, "color" : "purple" },
 4     { "x_axis": 70, "y_axis": 70, "height": 20, "width":20, "color" : "red" }];
 5
 6   var max_x = 0;
 7   var max_y = 0;
 8
 9   for (var i = 0; i < jsonRectangles.length; i++) {
10     var temp_x, temp_y;
11     var temp_x = jsonRectangles[i].x_axis + jsonRectangles[i].width;
12     var temp_y = jsonRectangles[i].y_axis + jsonRectangles[i].height;
13
14     if ( temp_x >= max_x ) { max_x = temp_x; }
15
16     if ( temp_y >= max_y ) { max_y = temp_y; }
17   }
18
19   var svgContainer = d3.select("body").append("svg")
20                                    .attr("width", max_x)
21                                    .attr("height", max_y)
22
23   var rectangles = svgContainer.selectAll("rect")
24                             .data(jsonRectangles)
25                             .enter()
26                             .append("rect");
27
28   var rectangleAttributes = rectangles
29                          .attr("x", function (d) { return d.x_axis; })
30                          .attr("y", function (d) { return d.y_axis; })
31                          .attr("height", function (d) { return d.height; })
32                          .attr("width", function (d) { return d.width; })
33                          .style("fill", function(d) { return d.color; });

  现在,所有的长方形都出现啦!

  SVG视窗能够把最右的(max_x+20,max_y+20)包括进去。

  而且,SVG视窗是动态生成,不需要我们去手动的更新width和height。

  使用JavaScript的For循环,我们就能够实现动态的resize我们的SVG视窗容器来适应数据。

  如果数据再次改变,我们的视窗(容器)也能够随时包含全部的数据可视化结果。

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