D3.js version4教程(5)
坐标轴(axis)
- 比例尺只是提供一个映射关系,坐标轴可以将比例尺以可读的方式显示出来
- 无论axis朝哪个方向,轴始终被渲染在原点处. 如果需要改变轴的位置,则需要对容器元素使用变换属性
- 一旦被创建，轴的原点也被固定,如果需要改变原点,则需要移除旧的轴并重新创建一个新的轴.
由axis创建的元素是可以通过外部样式表或修改其属性来自定义轴的外观. 轴元素由一个class为”domain”的path元素来表示比例尺的输入范围, 后面跟随几个经过变换的class为”tick”的g 元素来表示刻度. 每个刻度包含一个line元素 来表示刻度线, 和一个text 元素 表示刻度值.如下为一个典型的bottom-oriented轴:
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path>
<g class="tick" opacity="1" transform="translate(0,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy=".71em">0.0</text>
</g>
<g class="tick" opacity="1" transform="translate(176,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy=".71em">0.2</text>
</g>
<g class="tick" opacity="1" transform="translate(352,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy=".71em">0.4</text>
</g>
<g class="tick" opacity="1" transform="translate(528,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy=".71em">0.6</text>
</g>
<g class="tick" opacity="1" transform="translate(704,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy=".71em">0.8</text>
</g>
<g class="tick" opacity="1" transform="translate(880,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy=".71em">1.0</text>
</g>
</g>- d3.axisTop(scale)
根据指定的scale构造一个top-axis, tick参数为空, tick大小为6,并且padding为3. 轴在水平方向绘制. - d3.axisRight(scale)
根据指定的scale构造一个right-axis,tick参数为空,tick大小为6 ,并且padding为3. 轴在垂直方向绘制. - d3.axisBottom(scale)
根据指定的 scale构造一个bottom-axis, tick 参数为空, tick 大小为 6 并且 padding为 3. 轴在水平方向绘制. - d3.axisLeft(scale)
根据指定的scale构造一个left-axis, tick 参数为空, tick 大小为 6 并且 padding为 3. 轴在垂直方向绘制. - axis(context)
将轴渲染到指定的 context(容器), 可以为一个SVG容器的 选择集 (SVG or G 元素) 或者是 一个过渡. - axis.scale([scale])
如果指定了 scale 则设置比例尺并返回axis. 如果没有指定 scale 则返回当前使用的比例尺. - axis.ticks(arguments)
- axis.ticks([count[,specifier]])
axis.ticks([interval[,specifier]])
设置当axis被渲染时传给 scale.ticks 和 scale.tickFormat的arguments, 并返回axis生成器. arguments 依赖axis的比例尺类型: 最常见的是, 参数是一个建议的刻度数(或者当为时间比例尺时是一个 时间间隔 ), 或一个格式化刻度值的操作.axis.tickValues([values])
如果指定了 values 数组, 则使用指定的数组设置刻度，而不是自动生成刻度. 如果 values 为 null, 则清除当前的tick values参数. 如果没有指定 values 则返回当前的tick values参数默认为null. 例如, 使用指定的值设置刻度:axis.tickFormat([foramt])
如果指定了 format 则设置tick的格式并返回axis. 如果 format 没有指定则返回当前的格式化方法, 默认为null. 也就是说不会对刻度进行格式化操作. 当指定了 scale.tickFormat时, 下由axis.tickArguments传入的参数也会被格式化处理axis.tickSize([size])
如果指定了 size 则设置 内侧 和 外侧 刻度大小并返回axis. 如果 size 没有指定则返回当前的刻度尺寸,默认为6.- axis.tickSizeInner([size])
如果指定了 size 则设置内侧的刻度尺寸并返回axis. 如果没有指定 size 则返回当前的内侧刻度尺寸大小,默认为6. axis.tickSizeOuter([size])
如果指定了 size 则设置外侧的刻度尺寸并返回axis. 如果没有指定 size 则返回当前的外侧刻度尺寸大小,默认为6. 事实上外侧的刻度不是真实的刻度,而是输入范围path上的一部分,但是可能会覆盖第一个或最后一个内部刻度,外部刻度尺寸为0时表示输入范围的path为一条直线。axis.tickPadding([padding])
padding为刻度和刻度值之间的间距
如果 padding 被指定, 则根据指定的值以像素为单位设置padding. 如果没有指定 padding 则返回当前的padding值,默认为3.