- var width = 600;
- var height = 600;
- var svg = d3.select("#body")
- .append("svg")
- .attr("width",width)
- .attr("height",height)
- // 用于坐标轴的比例尺
- // 指数比例尺
- var xScalePow = d3.scale.pow()
- .exponent(2)
- .domain([0,1])
- .range([0,500])
- // 定义坐标轴
- var axisBottompPow = d3.svg.axis()
- .scale(xScalePow) // 使用上面定义的比例尺
- .orient("bottom") // 刻度方向向下
- // 在 svg 中添加一个包含坐标轴各元素的 g 元素
- var gAxis = svg.append("g")
- .attr("transform","translate(80,80)") // 平移到 (80,80)
- .attr("class","axis")
- // 在 gAxis 中绘制坐标轴
- axisBottompPow(gAxis)
效果图:
三 , 对数比例尺的坐标轴:
代码 :
- var width = 600;
- var height = 600;
- var svg = d3.select("#body")
- .append("svg")
- .attr("width",width)
- .attr("height",height)
- // 用于坐标轴的比例尺
- var xScaleLog = d3.scale.log()
- .domain([0.01,1])
- .range([0,500])
- // 定义坐标轴
- var axisBottomLog = d3.svg.axis()
- .scale(xScaleLog) // 使用上面定义的比例尺
- .orient("bottom") // 刻度方向向下
- // 在 svg 中添加一个包含坐标轴各元素的 g 元素
- var gAxis = svg.append("g")
- .attr("transform","translate(80,80)") // 平移到 (80,80)
- .attr("class","axis")
- // 在 gAxis 中绘制坐标轴
- axisBottomLog(gAxis)
效果图:
其他比例尺下的坐标轴大家可以自己去试一下.
下一章给大家做一个带比例尺, 坐标轴的柱形图.
来源: https://www.cnblogs.com/littleSpill/p/10830001.html