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坐标就是长方形的最右下角点的坐标。

 //新的jsonRectangle数据（其中紫色长方形的x坐标现在是160）

 var jsonRectangles = [

 {"x_axis":10,"y_axis":10,"height":20,"width":20,"color":"green"},

 {"x_axis":160,"y_axis":40,"height":20,"width":20,"color":"purplr"},

 {"x_axis":70,"y_axis":70,"height":20,"width":20,"color":"red"}

 ];

 var max_x = 0;//用于存储最大x坐标

 var max_y = 0;//用于存储最大y坐标

 //在jsonRectangle数组上的循环

 for(var i = 0;i<jsonRectangles.length;i++){

 var temp_x,temp_y;

 //为了得到最右的点，我们需要把x坐标和width相加

 temp_x = jsonRectangles[i].x_axis+jsonRectangles[i].width;

 //为了得到最下面的点，我们需要把y坐标和height相加

 temp_y = jsonRectangles[i].y_axis+jsonRectangles[i].height;

 /**

 *如果临时x坐标比max_x大，

 *那么就让max_x等于temp_x

 *否则，什么都不用做

 *同理，max_y也一样

 */

 if(temp_x>=max_x){

   max_x = temp_x;

 }

 if(temp_y>=max_y){

   max_y = temp_y;

 }

 }//循环停止

 max_x;

 //返回180

 max_y;

 //返回 90

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

　　现在，我们可以更新我们的SVG容器：

 //原来

 var svgContainer = d3.select("body").append("svg")

 .attr("height",200)

 .attr("width",200);

 //现在（使用变量max_x和max_y）

 var svgContainer = d3.select("body").append("svg")

 .attr("width",max_x + 20)

 .attr("width",max_x + 20);

 //注意 — 在这里给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视窗容器来适应数据。

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

巴特西

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

最新文章

热门文章