坐标轴坐标轴

d3.svg.axis() 创建默认的新坐标系
axis（selection）将此坐标轴应用到指定的选择集上，改选择集需要包裹有或
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);