绘制坐标轴//使用d3的svgaxis()方法生成坐标轴varx_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轴Rotation代码:添加orient()y_axis=d3.svg.axis().scale(scale_y).orient("left")旋转效果图如下:你会发现y轴的值从大变小而不是从小变大,这是因为坐标轴的方向电脑页面中的坐标轴方向不同于几何数学中的坐标轴方向:电脑屏幕坐标系,所以旋转后的y轴坐标系的值是从大变小而不是从小变大,所以我们可以改变y轴值的范围来改变页面的显示效果varscale_y=d3.scale.linear().domain([0,d3.max(data)])//domain定义输入范围//修改.range([0,g_height])为:.range([g_height,0])//range()定义输出范围发现这两个类控制坐标轴样式,通过设置css样式添加坐标轴的比例.domain,.tickline{stroke:gray;stroke-width:1;}到这里,坐标系画好了,~
