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属性将坐标轴移到自己想要的位置

《d3.js ---画坐标轴》

画y轴
g.append("g")
    .call(y_axis)

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

《d3.js ---画坐标轴》

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

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

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

普通数学坐标系:

《d3.js ---画坐标轴》

计算机屏幕坐标系

《d3.js ---画坐标轴》

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

《d3.js ---画坐标轴》

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

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

《d3.js ---画坐标轴》

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

《d3.js ---画坐标轴》

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

《d3.js ---画坐标轴》

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

    原文作者:云胡不喜
    原文地址: https://segmentfault.com/a/1190000012305388
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞