本人的個人部落格為： www.ourd3js.com
csdn部落格為： blog.csdn.net/lzhlzz
轉載請註明出處，謝謝。
第3節中做了一個表徵圖，但沒有為它添加一個相應的座標軸，這樣不知道每一個柱形到底有多長。這一節做一個座標軸。D3中的座標軸都是以 svg 圖的形式出現的，這也是為什麼在第3節中要使用 svg 的方法做直條圖的原因。第4節裡我們講解了 scale （比例）的用法，在做座標軸的時候也需要用到比例。第4節中，我們說到scale 是一個函數，這一節中的座標軸也是一個函數，但是用法卻有點不同，要注意。
看下面的代碼，我們分別定義資料，scale （比例），座標軸：
var dataset = [ 30 , 20 , 45 , 12 , 21 ];var xScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([0,500]);var axis = d3.svg.axis().scale(xScale).orient("bottom"); 1-4行是定義資料和 scale （比例），關於比例的內容可看上一節。
5-7是定義座標軸：
svg.append("g").call(axis); 在 svg 中添加一個g，g是 svg 中的一個屬性，是 group 的意思，它表示一組什麼東西，如一組 lines ， rects ，circles 其實座標軸就是由這些東西構成的。 上面還調用了一個 call 函數，這個比較重要。在 D3 中，call 相當於定義一個函數，再把選擇的元素給它，即相當於如下代碼：
function foo(selection) { selection .attr("name1", "value1") .attr("name2", "value2");}foo(d3.selectAll("div")) 這段代碼等同於：
d3.selectAll("div").call(foo); 所以 svg.append("g").call(axis) 就相當於將選擇的g元素傳給 axis 函數。 調用之後，座標軸就會顯示在相應的 svg 中。
svg.append("g").attr("class","axis").attr("transform","translate(10,160)").call(axis); 完整的代碼如下：
<style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text {font-family: sans-serif;font-size: 11px;}</style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script>var width = 600;var height = 600;var dataset = [ 30 , 20 , 45 , 12 , 21 ];var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);var xScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([0,500]);var axis = d3.svg.axis().scale(xScale).orient("bottom");svg.append("g").attr("class","axis").attr("transform","translate(10,160)").call(axis);svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",10) .attr("y",function(d,i){return i * 30; }) .attr("width",xScale) //注意這裡 .attr("height",28) .attr("fill","red"); </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
