版权声明:一只会飞的狼 https://blog.csdn.net/sinat_40697723/article/details/85262077
一.绘制步骤:
- 先创建一个svg元素
//创建一个svg元素 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'); //刻度方向向下
- 在svg中添加一个包含坐标轴各元素的g元素
//在svg中添加一个包含坐标轴各元素的g元素 var gAxis = svg.append('g') .attr('transform', 'translate(80,80)'); //平移到(80,80)
- 在gAxis中绘制坐标轴
//在gAxis中绘制坐标轴 axis(gAxis);
效果图:
坐标轴是绘制出来了,但是太丑了,这是因为还没有给坐标轴定制样式
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
最后再给坐标轴添加axis的类名
gAxis.attr('class', 'axis');
最后效果图:
扫描二维码关注公众号,回复:
4744838 查看本文章