zoukankan      html  css  js  c++  java
  • D3.js学习笔记(四)—— 使用SVG坐标空间

    目标

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

      我们的目标就是使用下面的数据集:

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

      并使用D3.js来对这些数据进行可视化:

    three circles

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

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

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

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

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

      coordinate

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

      这些图的Y坐标轴是右下向上递增。

      也就说,当我们想画一个坐标为x=30,y=30的圆,我们只要从左下方向右走30个单位,然后再向上走30个单位,就到了目的地。

      x=30 y=30

     SVG坐标空间

      SVG坐标空间与数学图形坐标空间原理基本一样,除了下面两点:

      1-SVG坐标空间中,x=0以及y=0的坐标是在左上方。

      2-SVG坐标空间中,Y坐标轴的增长方式是自上而下。

      SVG coordinate

      也就是说,随着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元素:

      HTML 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");

      结果是:

      SVG border

      通过上面得到的结果,有利于我们在数据可视化的时候,更好的使用逆序的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 element

    把数据绑定到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的圆形元素:

    add circle

    使用绑定的数据来更改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);

      结果是:

    alter cx and cy

      现在我们离目标和很近了,我们已经使用了数据集中的坐标值创建了三个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控制台中运行后的结果是:

    colored circles

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

  • 相关阅读:
    从头到尾测地理解KMP算法【转】
    【Android】使用BaseAdapter实现复杂的ListView【转】
    Git命令速查表【转】
    图解Git命令【转】
    Git-入门教程
    自定义Git【转】
    linux命令大全
    ppt转pdf网址
    【转】设置电脑眼睛保护色(背景色)
    【转】putty基本操作--不错
  • 原文地址:https://www.cnblogs.com/winleisure/p/3516320.html
Copyright © 2011-2022 走看看