坐标轴

• d3.svg.axis() 创建默认的新坐标系
• axis（selection）将此坐标轴应用到指定的选择集上，改选择集需要包裹有<svg>或<g>
• axis.scale([scale]) 设定或获取坐标轴的比例尺
• axis.orient([orientation])设定或获取坐标轴的方向。
• axis.ticks([argument...]) 设定或获取坐标轴的分隔数。默认是10
• axis.tickValues([values])设定或获取坐标轴的指定刻度
• axis.tickSize([inner,outer])设定或获取坐标轴内外刻度的长度。默认是6
• axis.innerTickSize([size])设定或获取坐标轴的内刻度。
• axis.outerTickSize([size])设定或获取坐标轴的外刻度
• axis.tickFormat([format])设定或获取刻度的格式

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);

结果

各比例尺的坐标轴

坐标轴必须设置一个比例尺，根据比例尺的不同可以得到不同的坐标轴。
比例尺中，定义域是坐标轴刻度值得范围，值域是坐标轴实际的像素长度。

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);

不同比例尺的坐标轴