首页 > 代码库 > d3.js学习10
d3.js学习10
坐标轴-横向d3.svg.axis
var height=500,width=500,margin=25,offset=50,axisWidth=width-2*margin,svg;function createSVG(){ svg=d3.select("body").append("svg") .attr("class","axis") .attr("width",width) .attr("height",height);}function renderAxis(scale,i,orient){ var axis=d3.svg.axis() .scale(scale)//数值尺度 .orient(orient)//方向 .ticks(5);//5个刻度 svg.append("g") .attr("transform",function(){//水平或垂直 if(["top","bottom"].indexOf(orient)>=0){ return "translate("+margin+","+i*offset+")";//i为移动的距离 }else{ return "translate("+i*offset+","+margin+")"; }}) .call(axis);} function renderAll(orient){ if(svg){svg.remove();} createSVG(); renderAxis(d3.scale.linear() .domain([0,1000]) .range([0,axisWidth]),1,orient);}renderAll("top");//top时,坐标位于轴上面,bottom在下面
改为renderAll("bottom");
改为日期尺度
把width设为1000,ticks(12)
renderAxis(d3.time.scale().domain([new Date(2014,0,1),new Date()]).range([0,axisWidth]),1,orient);
tickPadding(value)
var axis=d3.svg.axis() .scale(scale)//数值尺度 .orient(orient)//方向 .ticks(12)//5个刻度 .tickPadding(20);//设定坐标文字距离坐标的距离
tickFormat(function(){...})
var axis=d3.svg.axis() .scale(scale)//数值尺度 .orient(orient)//方向 .ticks(12)//5个刻度 .tickPadding(20) .tickFormat(function(v){ return v+".00"//格式化坐标轴文字});
图片同上
d3.js学习10
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。