脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-[D3.js] SVG-Axes（坐标轴），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 Axis
D3的轴组件是为D3的quantITative, time 和 ordinal 标度所设计的。
# d3.svg.axis()
新建一个默认的坐标轴。
# aixs(selection)
轴线适用于selection 或 transition。选择器必须包含一个 svg 或者 g 元素。 例如:
d3.select("body").apPEnd("svg")
.attr("class", "axis")
.attr("width", 1440)
.attr("height", 30)
.append("g")
.attr("transform", "translate(0,30)")
.call(axis);
# axis.scale([scale])（量度）
若scale量度有指定，则设置相应量度并返回轴线。若没有指定，则返回当前量度，默认为线性量度。
# axis.orient([orientation])（方向）
若orientation方向有指定，则设置相应方向并返回。若没有指定，则返回默认方向“bottom”。支持的方向有：
"top" - 横坐标的刻度标注位于轴上方
"bottom" - 横坐标的刻度标注位于轴下方
"left" - 纵坐标的刻度标注位于轴左边
"right" - 纵坐标的刻度标注位于轴右边
如果指定的方向不是以上四个支持的参数之一，则会自动恢复默认值。改变方向只能改变刻度标注和轴路径相关标签的位置，并不能改变轴线本身的位置；而要针对当前区域去改变轴的位置，则可以通过指定相应的g元素的transform属性。
# axis.ticks([arguments...])（刻度）
若arguments 参数有指定，则存储这些参数，然后在生成刻度时使用并返回。这些参数之后也会被传给 scale.ticks 去生成刻度值（除非刻度值有通过 axis.tickValues 明确地指定）。同时，这些参数也会被传进 scale 的 tickFormat 方法去生成默认的刻度格式。若没有指定参数，则返回默认的刻度参数，默认为[10]。
合适的参数依赖于相关的量度：对于一个线性量度来说，你可以像 axis.ticks(20) 这样去指定刻度数量；对于对数量度，你应该指定数量同时指定刻度格式；而对于时间量度，像 axis.ticks(d3.time.minutes, 15) 这样有一个时间间隔会更为恰当。
#axis.tickValues([values])（刻度值）
若指定了values 数组，这些值将会被用于刻度标注，而不会使用量度自动生成的刻度值。如果values 为空，将会清空所有之前设置的刻度值并恢复到原来生成的默认刻度值。若没有指定刻度值，返回当前设置好的刻度值，默认为空。例如，指定刻度值生成刻度尺：
VAR xAxis = d3.svg.axis()
.scale(x)
.tickValues([1, 2, 3, 5, 8, 13, 21]);
这里明确指定的刻度值的优先级高于在 axis.ticks 传入的参数。但是，所有刻度参数都会传入 scale 的 tickFormat 方法里即使刻度格式没有设置；因此，它对于 axis.ticks 和 axis.tickValues 都是有效的。
# axis.tickSize([inner, outer])（刻度线长度）
若指定内部和外侧刻度线的长度，则设置之；若无指定，则返回当前内部刻度线的长度，默认为6（6px）。
# axis.innerTickSize([size])（内部刻度线的长度）
若大小指定，则按大小设置内部刻度线的长度并返回轴线。若无指定，则返回当前默认为6的内部刻度线大小。内部刻度线控制着刻度线的长度，从轴本身的位置开始计算偏移。
# axis.outerTickSize([size])（外侧刻度线的长度）
若大小指定，按大小设置外侧刻度线的长度并返回轴线。若无指定，则返回当前默认为6的外侧刻度线大小。外侧刻度线控制的是刻度尺值域两端的刻度线的长度，从轴本身的位置开始计算偏移。然而，“外侧刻度线”实际上不是刻度线而是值域路径中的一部分，它们的位置有相关量度的值域范围所决定。因此，外侧刻度线可能会被第一个或最后一个内部刻度线重合。大小为0的外侧刻度线会禁止掉值域路径的两端，无法绘制出直线。
# axis.tickPadding([padding])（刻度线与刻度标注之间的填充）
若指定填充，则设置之并返回轴线；反之，返回当前的填充大小，默认为3（3px）。
# axis.tickFormat([format])（刻度标注格式化）
若指定格式，按指定的方法设置格式并返回轴线。若无指定格式，默认为空。空的格式也意味着将会使用 scale 在调用 scale.tickFormat 时的默认格式。这种情况下，在 ticks 里指定的参数就会被传到 scale.tickFormat 里。
戳 d3.format 帮助创建格式化。例如 axis.tickFormat(d3.format(",.0f")) 会把整数在千位上用逗号隔开来显示。首先定义格式：var commasFormatter = d3.format(",.0f")，这样你可以在你的数据上像方法那样调用它，例如，在以逗号分组的整数前加上货币单位：.tickFormat(function(d) { return "$" + commasFormatter(d); })。
注：对于对数(LOG)量度，刻度的个数无法自定义；但是，刻度标签的个数可以通过 ticks 定义。同样的， 对数量度的刻度格式通常会通过 ticks 去指定而不是 tickFormat，以便保留默认的行为。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-[D3.js] SVG-Axes（坐标轴）全部内容，希望文章能够帮你解决javascript代码实例教程-[D3.js] SVG-Axes（坐标轴）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。