D3学习之坐标系绘制
坐标轴的绘制我们需要搞清楚以下三个要点：
1）、axis函数
2）、.call()函数用于组合
3）、坐标轴的平移旋转
关于第三点其实就是"transform","translate(X,Y)"的含义和效果结合自己要求进行使用。
<html> <head> <meta charset="utf-8"> <title>坐标轴</title> <style> .axis path, .axis line{ fill: none; stroke: skyblue; shape-rendering: crispEdges; stroke-width: 3px; } .axis text { font-family: sans-serif; font-size: 11px; } .MyPath { fill: none; stroke: darkred; stroke-width: 2px; } </style> </head> <body> <script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script> <script> var svg = d3.select("body") .append("svg") .attr("width", 400) .attr("height", 400);//向body中添加了一个svg元素 // 自定义数据 var data = [12,25,28,56,96,56,45,78]; //定义比例尺 var xScale = d3.scale.linear() .domain([0, data.length-1]) .range([0, 300]); var yScale = d3.scale.linear() .domain([0, d3.max(data)]) .range([250, 0]); //使用axis函数来生成坐标轴的组合元素 var xAxis = d3.svg.axis() .scale(xScale)//坐标轴联立刻度尺,用于缩放 .orient("bottom");//该函数指定坐标轴刻度的方向 var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); //插入坐标轴 var gxAxis = svg.append("g")//添加一个g(group)元素,用于存放坐标轴的元素 .attr("class","axis")//添加一个类（类名叫axis）,用于修饰坐标轴//其实无影响(非必需代码）) .attr("transform","translate(30,350)") .call(xAxis);//添加x轴(关键代码，不可省略) var gyAxis = svg.append("g") .attr("class","axis") .attr("transform","translate(30,100)") .call(yAxis); // //上面的代码还可以怎么写呢,其实完全可以这样来写 // var xAxis = d3.svg.axis() // .scale(xScale); // var yAxis = d3.svg.axis() // .orient("left") // .scale(yScale); // //不定义直接添加也是可以的 // svg.append("g") // .attr("transform","translate(30,350)") // .call(xAxis); // svg.append("g") // .attr("transform","translate(30,100)") // .call(yAxis); // 线段生成器 var line = d3.svg.line() .x( function(d,i){ return xScale(i); } ) .y( function(d){ return yScale(d); } ) .interpolate("cardinal"); // 折线图 svg.append("path") .attr("class","MyPath") .attr("d", line(data) ) .attr("transform","translate(30,100)"); </script> </body> </html>
