zoukankan      html  css  js  c++  java
  • [D3.js] SVG > Axes(坐标轴)

    D3的坐标轴组件会自动显示刻度的参考线。这可以让你只专注于数据的显示,而让坐标轴组件去帮你绘制坐标轴和标记刻度。

    Axis Component 6186172 5537697 4573883 4403522 4349486 3892919 3371592 3259783 3212294 2983699 2996766 2996785 1849162 4323929

    Axis

     D3的轴组件是为D3的quantitativetime 和 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,以便保留默认的行为。

     

    ====================== 终于翻译完毕之分割线 ==========================

     原文 

  • 相关阅读:
    基于term vector深入探查数据
    oracle 行转列
    oracle 统计成绩
    最全最新个税计算公式---今天你税了吗?
    .net反混淆脱壳工具de4dot的使用
    使用ILSpy软件反编译.Net应用程序的方法及注意事项
    EmguCV使用Stitcher类来拼接图像
    从睡姿就可以看出你的性格,据说非常准,快存!
    分享几个.NET WinForm开源组件,纪念逐渐远去的WinForm。。。
    【转载】关于.NET下开源及商业图像处理(PSD)组件
  • 原文地址:https://www.cnblogs.com/zhengyingyan/p/4331912.html
Copyright © 2011-2022 走看看