坐标轴表示在图像上就是两根带刻度的线，刻度需要比例尺来决定。
比例尺是d3中设置的。
var xScale= d3.scale.linear()
.domain([0, 10])
.range([0, 100]);
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);
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>
