【 D3.js 入門系列 --- 5 】 如何添加座標軸

時間  2020-08-25
標籤 d3.js 入門 系列 如何 添加 座標軸 欄目 JavaScript 简体版
原文   原文鏈接

 第3節中作了一個圖標，但沒有爲它添加一個相應的座標軸，這樣不知道每個柱形到底有多長。這一節作一個座標軸。javascript

 

    D3中的座標軸都是以 svg 圖的形式出現的，這也是爲何在第3節中要使用 svg 的方法作柱形圖的緣由。第4節裏咱們講解了 scale （比例）的用法，在作座標軸的時候也須要用到比例。第4節中，咱們說到scale 是一個函數，這一節中的座標軸也是一個函數，可是用法卻有點不一樣，要注意。css

    看下面的代碼，咱們分別定義數據，scale （比例），座標軸：java

 

[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 （比例），關於比例的內容可看上一節。app

 

    5-7是定義座標軸：dom

 

  • 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 svg

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程