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

66461801f6b31b5ca71720d30d7c7894.png

画y轴

g.append("g")

.call(y_axis)

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

a8b83e7886b03debb8f04918afd3e8fa.png

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

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

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

普通数学坐标系:

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值