在 SVG 画布的预定义元素里，有七种基本图形：矩形,圆形,椭圆,线段,折线,多边形,路径. SVG还有g标签,意思是分组,group,可以将其他的容器进行组合.
调用数轴函数并不会返回值，而是会生成数轴相关的可见元素，包括轴线、标签和刻度。
var xAxis = d3.svg.axis(); xAxis.scale(xScale); // 传入比例尺 xAxis.orient("bottom"); //设置标签的位置,是在线上还是线下 svg.append("g") //分组元素是不可见的 .call(xAxis); //call() 接着把 g 交给了 xAxis 函数，也就是要在 g 元素里面生成数轴。x轴坐标系
<html> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> <body> <p>hello world</p> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var width = 300; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height); //设定高度 var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; var linear = d3.scale.linear() .domain([0, d3.max(dataset)]) .range([0, 250]); var axis = d3.svg.axis() .scale(linear) //指定比例尺 .orient("bottom") //指定刻度的方向 .ticks(6); //指定刻度的数量 svg.append("g") .attr("class","axis") .attr("transform","translate(20,130)") //transform是将整体平移 .call(axis); </script> </body> </html>xy居中坐标系 居中的关键是linear方法的映射和transform属性的配合使用
<html> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var width = 400; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height); //设定高度 var xlinear = d3.scale.linear() .domain([-150, 150]) .range([0, 300]); var ylinear = d3.scale.linear() .domain([0, 250]) .range([250, 0]); var xaxis = d3.svg.axis() .scale(xlinear) //指定比例尺 .orient("bottom") //指定刻度的方向 .ticks(10); //指定刻度的数量 var yaxis = d3.svg.axis() .scale(ylinear) .orient("left") .ticks(5); svg.append("g") .attr("class","axis") .attr("transform","translate(0,250)") //x轴上下平移不会对坐标系造成影响 .call(xaxis); svg.append("g") .attr("class","axis") .attr("transform","translate(150,0)") //y轴左右平移不会对坐标系造成影响 .call(yaxis); </script> </body> </html>设置标签样式
var formatAsPercentage = d3.format(".1%"); xAxis.tickFormat(formatAsPercentage);