坐标轴表示在图像上就是两根带刻度的线,刻度需要比例尺来决定。
比例尺是d3中设置的。
var xScale= d3.scale.linear()
.domain([0, 10])
.range([0, 100]);
domain是显示刻度
range是实际占用像素。注意range不只可以用实际像素,还可以用颜色,不过和坐标轴就没关系了。特别注意,y轴是从上往下的,所以y轴的domain和range要开始结束值不是对应的,而是相反的。
接下来是根据比例尺生成坐标轴,也是d3中设置的。
var xAxis=d3.svg.axis()
.scale(xScale)
.orient("bottom")
//.tickValues([0,20,40,60,80,100])
.ticks(5)
.tickFormat(function(d){
return "¥"+d;
});
orient是坐标轴文字相对位置,注意不是坐标轴位置,可选参数
"top" -刻度位于横轴域路径上面
"bottom" -刻度位于横轴域路径下面
"left" -刻度位于纵轴域路径左边
"right" -刻度位于纵轴域路径右边
坐标轴位置需要在绘制的时候使用transform进行变换,详见绘制部分
ticks和tickValues,前者是把坐标轴等分,后者是直接指定刻度。其他还有tickSize(分内刻度和外刻度),innerTickSize(内刻度),outerTickSize(外刻度)等,详细找api看吧
tickFormat是将刻度格式化后显示,除了用function,还可以使用d3.format
最后是用svg生成图形
svg.append("g")
.attr("id","yaxis")
.attr("transform","translate("+xScale(0)+",0)")
.attr("stroke","gray")
.attr("fill","none")
.call(yAxis);
生成图形不用说了,attr是给g元素加属性
transform和css同名属性效果一样,比如translate就是平移。注意最初位置统一是左上角0,0,需要自己移动到合适的距离。
xScale(刻度),可以获取到刻度对应的像素位置,xScale是上面的比例尺变量
然后注意填充边框颜色用stroke,内部颜色fill,坐标轴需要用stroke
还要注意的是,实际显示刻度时候一般都是显示在坐标轴外面的,这样坐标轴就不能放在画布边缘了,不然刻度会画到坐标轴外面看不到,可以加个padding。
万一坐标轴发生了变化,想重新绘制怎么办?
svg.select("#xaxis")
.attr("stroke","red")
.call(xAxis);
select可以找到对应图形(参数是css选择器),然后直接修改属性即可。
如果坐标轴数据也被修改了,那么需要再次call
完整代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>坐标轴</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="content"> </div>
<button οnclick="setRed()">换成红色</button>
<script>
//创建svg
var width=400;
var height=300;
var padding = 50;
var svg=d3.select("body").select("#content")
.append("svg")
.attr("width",width)
.attr("height",height);
//创建比例尺
var xScale= d3.scale.linear()
.domain([-10, 10])
.range([0, width - padding*2]);
var yScale= d3.scale.linear()
.domain([0, 20])
.range([height - padding*2, 0]);
//创建坐标轴
var xAxis=d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
var yAxis=d3.svg.axis()
.scale(yScale)
.orient("right")
.ticks(5);
//绘制坐标轴
svg.append("g")
.attr("id","xaxis")
.attr("transform","translate("+padding+","+(height-padding)+")")
.attr("stroke","gray")
.attr("fill","none")
.call(xAxis);
svg.append("g")
.attr("id","yaxis")
.attr("transform","translate("+(xScale(0)+padding)+","+padding+")")
.attr("stroke","gray")
.attr("fill","none")
.call(yAxis);
//换成红色
function setRed(){
svg.select("#xaxis").attr("stroke","red");
svg.select("#yaxis").attr("stroke","red");
}
</script>
</body>
</html>