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