設定軸線
var xAxis = d3.svg.axis().scale(xScale)
.orient("bottom") //軸值顯示於下方
.ticks(5); //設定軸距數
var yAxis = d3.svg.axis().scale(yScale)
.orient("left") //軸值顯示於左方
.ticks(4);
軸線樣式
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
顯示軸線
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + ", 0)")
.call(yAxis);