• d3.svg.axis() 創(chuàng)建默認(rèn)的新坐標(biāo)系
• axis（selection）將此坐標(biāo)軸應(yīng)用到指定的選擇集上，改選擇集需要包裹有<svg>或<g>
• axis.scale([scale]) 設(shè)定或獲取坐標(biāo)軸的比例尺
• axis.orient([orientation])設(shè)定或獲取坐標(biāo)軸的方向。
• axis.ticks([argument...]) 設(shè)定或獲取坐標(biāo)軸的分隔數(shù)。默認(rèn)是10
• axis.tickValues([values])設(shè)定或獲取坐標(biāo)軸的指定刻度
• axis.tickSize([inner,outer])設(shè)定或獲取坐標(biāo)軸內(nèi)外刻度的長(zhǎng)度。默認(rèn)是6
• axis.innerTickSize([size])設(shè)定或獲取坐標(biāo)軸的內(nèi)刻度。
• axis.outerTickSize([size])設(shè)定或獲取坐標(biāo)軸的外刻度
• axis.tickFormat([format])設(shè)定或獲取刻度的格式

var width = 600;
var height = 600;

var svg = d3.select("body").append("svg")
                .attr("width",width)
                .attr("height",height);

var scale = d3.scale.linear()
                .domain([0,10])
                .range([0,150]);
    
var axisLeft = d3.svg.axis()
                .scale(scale)
                .orient("left")
                .ticks(5);
                
var axisRight = d3.svg.axis()
                .scale(scale)
                .orient("right")
                .tickValues([3,4,5,6,7]);
                
var gAxisLeft = svg.append("g")
            .attr("transform","translate(80,80)")
            .attr("class","axis")
            .call(axisLeft);
            
var gAxisRight = svg.append("g")
            .attr("transform","translate(100,80)")
            .attr("class","axis")
            .call(axisRight);

            
var axisTop = d3.svg.axis()
                .scale(scale)
                .orient("top")
                .ticks(5)
                .tickSize(2,4);
                
var gAxisTop = svg.append("g")
            .attr("transform","translate(80,30)")
            .attr("class","axis")
            .call(axisTop);

scale.range([0,300]);
            
var axisBottom = d3.svg.axis()
                .scale(scale)
                .orient("bottom")
                .ticks(5)
                .tickFormat(d3.format("$0.1f"));
                
var gAxisBottom = svg.append("g")
            .attr("transform","translate(80,300)")
            .attr("class","axis")
            .call(axisBottom);

結(jié)果

各比例尺的坐標(biāo)軸

坐標(biāo)軸必須設(shè)置一個(gè)比例尺，根據(jù)比例尺的不同可以得到不同的坐標(biāo)軸。
比例尺中，定義域是坐標(biāo)軸刻度值得范圍，值域是坐標(biāo)軸實(shí)際的像素長(zhǎng)度。

var width = 600;
var height = 600;

var svg = d3.select("body").append("svg")
                .attr("width",width)
                .attr("height",height);

var linear = d3.scale.linear().domain([0,1]).range([0,500]);

var pow = d3.scale.pow().exponent(2).domain([0,1]).range([0,500]);

var log = d3.scale.log().domain([0.01, 1]).range([0, 500]);

var axisLinear = d3.svg.axis().scale(linear).orient("bottom");

var axisPow = d3.svg.axis().scale(pow).orient("bottom");

var axisLog = d3.svg.axis().scale(log).orient("bottom");

svg.append("g").attr("transform","translate(30,30)").attr("class","axis").call(axisLinear);

svg.append("g").attr("transform","translate(30,60)").attr("class","axis").call(axisPow);

svg.append("g").attr("transform","translate(30,90)").attr("class","axis").call(axisLog);

不同比例尺的坐標(biāo)軸