d3.js ---画坐标轴

画坐标轴

//使用d3的svg的axis()方法生成坐标轴
var x_axis = d3.svg.axis().scale(scale_x),
    y_axis = d3.svg.axis().scale(scale_y)

g.append("g")
    .call(x_axis)
    

页面效果如下：这个时候x轴在页面的上方，不在我们想要的位置，可以通过设置transform属性将坐标轴移到自己想要的位置

画y轴

g.append("g")
    .call(y_axis)

效果如下，这个时候x轴在页面的上方，不在我们想要的位置，所以要让y轴旋转

y轴旋转代码：加上 orient()

y_axis = d3.svg.axis().scale(scale_y).orient("left")

旋转后的效果图如下：会发现y轴的数值是由大变小而不是由小变大，这是因为在计算机页面中的时候和几何数学中的坐标轴哦的方向是不一样的

普通数学坐标系：

计算机屏幕坐标系

所以旋转后的y轴坐标系的值是由大变小而不是由小变大

所以我们可以改变y轴的值的范围来改变页面的显示效果

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定义输入范围
    //将 .range([0, g_height])修改为：
    .range([g_height, 0]) //range（）定义输出范围   

发现这两个类控制着坐标轴样式，通过设置css样式给坐标轴加上刻度

.domain,
.tick line {
    stroke: gray;
    stroke-width: 1;
}

到这儿，坐标系就画完了，~