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

Posted 冷雨恋晴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了 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 

以上是关于 D3.js 入门系列 --- 5 如何添加坐标轴的主要内容，如果未能解决你的问题，请参考以下文章

D3.js 入门系列 --- 6 如何让图表动起来

D3.js的v5版本入门教程（第八章）—— 坐标轴

D3.js 入门系列 --- 2.1 关于如何选择，插入，删除元素

D3.js 入门系列 --- 2 如何使用数据和选择元素

D3.js 入门系列 — 11 入门总结

D3.js 入门系列 — 0 简介和安装