1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 8 // 用于坐标轴的线性比例尺 9 var xscale = d3.scale.linear() 10 .domain([0,10]) 11 .range([0,300]) 12 13 14 // 定义坐标轴 15 var axisbottom = d3.svg.axis() 16 .scale(xscale) //使用上面定义的比例尺 17 .orient("bottom") //刻度方向向下 18 19 20 //在svg中添加一个包含坐标轴各元素的g元素 21 var gaxis = svg.append("g") 22 .attr("transform","translate(80,80)") //平移到(80,80) 23 .attr("class","axis") 24 25 //在gaxis中绘制坐标轴 26 axisbottom(gaxis)
1 .axis path{ 2 fill:none; 3 stroke : black; 4 shape-rendering:crispedges; 5 } 6 .axis line{ 7 fill:none; 8 stroke : black; 9 shape-rendering:crispedges; 10 } 11 .axis text{ 12 font-family: sans-serif; 13 font-size: 11px; 14 }
1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 //用于坐标轴的线性比例尺 8 9 var xscale = d3.scale.linear() 10 .domain([0,10]) 11 .range([0,300]) 12 13 14 //定义坐标轴 15 var axisleft = d3.svg.axis() 16 .scale(xscale) 17 .orient("left") //刻度方向向左 18 .ticks(5) 19 20 21 //在svg中添加一个包含坐标轴各元素的g元素 22 var gaxis = svg.append("g") 23 .attr("transform","translate(80,80)") //平移到(80,80) 24 .attr("class","axis") 25 //在gaxis中绘制坐标轴 26 axisleft(gaxis)
1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 //用于坐标轴的线性比例尺 8 9 var xscale = d3.scale.linear() 10 .domain([0,10]) 11 .range([0,300]) 12 13 14 //定义坐标轴 15 var axisright = d3.svg.axis() 16 .scale(xscale) 17 .orient("right") //刻度方向向右 18 .tickvalues([3,4,5,6,7]) 19 20 21 22 //在svg中添加一个包含坐标轴各元素的g元素 23 var gaxis = svg.append("g") 24 .attr("transform","translate(80,80)") //平移到(80,80) 25 .attr("class","axis") 26 //在gaxis中绘制坐标轴 27 axisright(gaxis)
1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 //用于坐标轴的线性比例尺 8 9 var xscale = d3.scale.linear() 10 .domain([0,10]) 11 .range([0,300]) 12 13 //定义坐标轴 14 var axiostop = d3.svg.axis() 15 .scale(xscale) 16 .orient("top") //刻度方向向上 17 .ticks(5) 18 .ticksize(2,4) 19 .tickformat(d3.format("$0.1f"))
20 21 22 //在svg中添加一个包含坐标轴各元素的g元素 23 var gaxis = svg.append("g") 24 .attr("transform","translate(80,80)") //平移到(80,80) 25 .attr("class","axis") 26 //在gaxis中绘制坐标轴 27 axiostop(gaxis) 28
1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 8 //用于坐标轴的比例尺 9 10 // 线性比例尺 11 var xscaleline = d3.scale.linear() 12 .domain([0,1]) 13 .range([0,500]) 14 15 //定义坐标轴 16 17 var axisbottomline = d3.svg.axis() 18 .scale(xscaleline) //使用上面定义的比例尺 19 .orient("bottom") //刻度方向向下 20 21 22 //在svg中添加一个包含坐标轴各元素的g元素 23 var gaxis = svg.append("g") 24 .attr("transform","translate(80,80)") //平移到(80,80) 25 .attr("class","axis") 26 27 //在gaxis中绘制坐标轴 28 axisbottomline(gaxis)
1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 8 //用于坐标轴的比例尺 9 10 // 指数比例尺 11 var xscalepow = d3.scale.pow() 12 .exponent(2) 13 .domain([0,1]) 14 .range([0,500]) 15 16 17 //定义坐标轴 18 19 var axisbottomppow = d3.svg.axis() 20 .scale(xscalepow) //使用上面定义的比例尺 21 .orient("bottom") //刻度方向向下 22 23 24 //在svg中添加一个包含坐标轴各元素的g元素 25 var gaxis = svg.append("g") 26 .attr("transform","translate(80,80)") //平移到(80,80) 27 .attr("class","axis") 28 29 //在gaxis中绘制坐标轴 30 axisbottomppow(gaxis)
效果图:
三 、 对数比例尺的坐标轴:
代码 :
1 var width = 600; 2 var height = 600; 3 var svg = d3.select("#body") 4 .append("svg") 5 .attr("width",width) 6 .attr("height",height) 7 8 //用于坐标轴的比例尺 9 10 var xscalelog = d3.scale.log() 11 .domain([0.01,1]) 12 .range([0,500]) 13 14 15 //定义坐标轴 16 var axisbottomlog = d3.svg.axis() 17 .scale(xscalelog) //使用上面定义的比例尺 18 .orient("bottom") //刻度方向向下 19 20 //在svg中添加一个包含坐标轴各元素的g元素 21 var gaxis = svg.append("g") 22 .attr("transform","translate(80,80)") //平移到(80,80) 23 .attr("class","axis") 24 25 //在gaxis中绘制坐标轴 26 axisbottomlog(gaxis)
效果图:
其他比例尺下的坐标轴大家可以自己去试一下。
下一章给大家做一个带比例尺、坐标轴的柱形图。
如对本文有疑问, 点击进行留言回复!!
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论