zoukankan      html  css  js  c++  java

  • 【 D3.js 入门系列 --- 5 】 如何添加坐标轴

     第3节中做了一个图标，但没有为它添加一个相应的坐标轴，这样不知道每一个柱形到底有多长。这一节做一个坐标轴。

        D3中的坐标轴都是以 svg 图的形式出现的，这也是为什么在第3节中要使用 svg 的方法做柱形图的原因。第4节里我们讲解了 scale （比例）的用法，在做坐标轴的时候也需要用到比例。第4节中，我们说到scale 是一个函数，这一节中的坐标轴也是一个函数，但是用法却有点不同，要注意。

        看下面的代码，我们分别定义数据，scale （比例），坐标轴：

    [javascript] view plain copy
     
    1. var dataset = [ 30 , 20 , 45 , 12 , 21 ];  
    2. var xScale = d3.scale.linear()  
    3.                     .domain([0,d3.max(dataset)])  
    4.                     .range([0,500]);                  
    5. var axis = d3.svg.axis()  
    6.                 .scale(xScale)  
    7.                 .orient("bottom");  

        1-4行是定义数据和 scale （比例），关于比例的内容可看上一节。

        5-7是定义坐标轴：

    • d3.svg.axis() 调用这个函数就会生成一个坐标轴的函数
    • scale() 这个函数用于指定坐标轴的 scale （比例）
    • orient() 这个函数用于指定坐标轴的分割点和数字的朝向，在哪个方向显示。 bottom 表示在坐标轴的下方显示。
        画出坐标轴的代码如下：
    [javascript] view plain copy
     
    1. svg.append("g")  
    2.     .call(axis);  
        在 svg 中添加一个g，g是 svg 中的一个属性，是 group 的意思，它表示一组什么东西，如一组 lines ， rects ，circles 其实坐标轴就是由这些东西构成的。
        上面还调用了一个 call 函数，这个比较重要。在 D3 中，call 相当于定义一个函数，再把选择的元素给它，即相当于如下代码：
    [javascript] view plain copy
     
    1. function foo(selection) {  
    2.   selection  
    3.       .attr("name1", "value1")  
    4.       .attr("name2", "value2");  
    5. }  
    6. foo(d3.selectAll("div"))  
        这段代码等同于：
    [javascript] view plain copy
     
    1. d3.selectAll("div").call(foo);  
        所以 svg.append("g").call(axis) 就相当于将选择的g元素传给 axis 函数。
        调用之后，坐标轴就会显示在相应的 svg 中。
        还可以定义几个css样式改变坐标轴的粗细，字体等等。 transform 属性用于移动坐标轴在 svg 中的位置。
    [javascript] view plain copy
     
    1. svg.append("g")  
    2.     .attr("class","axis")  
    3.     .attr("transform","translate(10,160)")  
    4.     .call(axis);  
        
        完整的代码如下：
    [javascript] view plain copy
     
    1. <style>  
    2.   
    3. .axis path,  
    4. .axis line{  
    5.     fill: none;  
    6.     stroke: black;  
    7.     shape-rendering: crispEdges;  
    8. }  
    9.   
    10. .axis text {  
    11.     font-family: sans-serif;  
    12.     font-size: 11px;  
    13. }  
    14.   
    15. </style>  
    16.     
    17.     <body>    
    18.           
    19.         <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>    
    20.         <script>  
    21.           
    22.         var width = 600;  
    23.         var height = 600;  
    24.         var dataset = [ 30 , 20 , 45 , 12 , 21 ];  
    25.           
    26.         var svg = d3.select("body").append("svg")  
    27.                                 .attr("width",width)  
    28.                                 .attr("height",height);  
    29.           
    30.         var xScale = d3.scale.linear()  
    31.                             .domain([0,d3.max(dataset)])  
    32.                             .range([0,500]);  
    33.                               
    34.         var axis = d3.svg.axis()  
    35.                         .scale(xScale)  
    36.                         .orient("bottom");  
    37.                           
    38.         svg.append("g")  
    39.             .attr("class","axis")  
    40.             .attr("transform","translate(10,160)")  
    41.             .call(axis);  
    42.           
    43.         svg.selectAll("rect")  
    44.            .data(dataset)  
    45.            .enter()  
    46.            .append("rect")  
    47.            .attr("x",10)  
    48.            .attr("y",function(d,i){  
    49.                 return i * 30;  
    50.            })  
    51.            .attr("width",xScale)           //注意这里  
    52.            .attr("height",28)  
    53.            .attr("fill","red");  
    54.              
    55.         </script>    

        结果如下图：
     
        
     
     
     
     
     
     
     

    博客为： www.ourd3js.com       csdn博客为： blog.csdn.net/lzhlzz 
  • 相关阅读:
    Git for Windows安装教程
    MySQL 操作已存在的表（ALTER TABLE）
    Xiuno 简约白色主题
    PHP 文件上传操作类
    Leetcode 5. 最长回文子串
    Hexo开篇
    Laravel 模型关联——连带删除
    Layui表单赋初值之 checkbox
    Layui提交表单时验证必选的多选框是否有选中
    自定义 checkbox 和 radio
  • 原文地址：https://www.cnblogs.com/js-wxf/p/5819672.html
Copyright © 2011-2022 走看看