PMOD3应用注释_D3_C08Tutorials_16_Axes_使用D3添加坐标轴讲述.docx

D3技术应用注释——使用D3添加坐标轴 1、简要说明 介绍了如何使用D3给图形添加坐标轴。 /tutorials/d3/axes/ 2、以下是实际内容 Having mastered the use of D3 scales, we now have this scatterplot: Let’s add horizontal and vertical axes, so we can do away with the horrible red numbers cluttering up our chart. 通过在上面的散点图添加横坐标或纵坐标轴，来学习D3的坐标轴功能。 强烈建议在看懂2012-09-24_D3_C08 Tutorials_15_Scale.docx的基础上，来看这篇文章。  Introducing Axes Much like the scale functions,?D3’s?axes?are actually?functions?whose parameters you define. Unlike scales, when an axis function is called, it doesn’t return a value, but generates the visual elements of the axis, including lines, labels, and ticks. Note that the axis functions are SVG-specific, as they generate SVG elements. Also, axes are intended for use with quantitative scales (as opposed to ordinal ones). 就像标度变换功能一样，D3的坐标由你给定的参数来定义。 不同的是，当调用坐标轴函数时，不返回值，而生成实际的坐标图像元素。包括轴线、坐标、刻度。特别注意，坐标轴函数生成的坐标轴是SVG的功能，用的是SVG元素。（line等）。D3仅是提供了一个更为简便的接口。 Setting up an Axis Use?d3.svg.axis()?to create a generic axis function: var xAxis = d3.svg.axis(); At a minimum, each axis also needs to be told on what?scale?to operate. Here we’ll pass in the?xScale?from the scatterplot code: xAxis.scale(xScale); 可以使用d3.svg.axis()?功能创建轴对象，使用轴对象，至少要指定scale。这里的xScale指的是上一张Tutorials 15中画散点图用的xScale。但是对于NV封装的d3来说，这点也是不必要的。 D3的封装还仅是提供方便的操作SVG的接口，如点、线、圆、矩形等。Nv的封装则提供方便的操作各种图表的接口。比D3更高一层。 例如，对于NV封装，可以直接定义scatter对象来画散点图，给scatter关联的数据data，会自动用于处理坐标轴。从这一点上来说，要改变NV封装的唯一方式，仅有深入NV修改其内部的内容。 We can also specify where the labels should appear relative to the axis itself. The default is?bottom, meaning the labels will appear below the axis line. (Although this is the default, it can’t hurt to specify it explicitly.) xAxis.orient(bottom); 通过orient来定义坐标轴显示与图标上方还是下方。 Of course, we can be more concise and string all this together into one line: var xAxis = d3.svg.axis() .scale(xScale) .orient(bottom); Finally, to actually generate the axis and insert all those little lines and labels into our SVG, we must?call?the?xAx