<style> .axis path, .axis line{ fill:none; stroke:black; shape-rendering: crispEdges; } .axis text{ font-family: sans-serif; font-size: 11px; } </style> </head> <body> <script> var width = 600; var height = 600; var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height); // 用于坐标轴的线性比例尺 var xScale = d3.scale.linear() .domain([0,10]) .range([0,300]); // 定义坐标轴 var axis = d3.svg.axis() .scale(xScale) //使用上边定义的比例尺 .orient("bottom")//刻度方向向下 可设置刻度方向向上，下，左，右 .ticks(5) //.tickValues([3,4,5,6,7]) //自定义显示的刻度 .tickSize(2,6); //调整刻度长度 第一个参数内部刻度长度，第二个参数首尾刻度长度 （也可用innerTickSize()内部和outerTickSize()首尾 来分别进行设置 // 在svg中添加一个包含坐标轴各元素的g元素 var gAxis = svg.append("g") .attr("transform","translate(80,80)") //平移到（80,80） .attr("class","axis") .call(axis); //将gAxis作为参数传递给axis （另一种绘制方法） // 在gAxis中绘制坐标轴 // axis(gAxis); </script>
