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,以便保留默认的行为。

     

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

     原文 

  • 相关阅读:
    jquery 序列化form表单
    nginx for windows 安装
    nodejs idea 创建项目 (一)
    spring 配置 shiro rememberMe
    idea 2018 解决 双击shift 弹出 search everywhere 搜索框的方法
    redis 在windows 集群
    spring IOC控制反转和DI依赖注入
    redis 的安装
    shiro 通过jdbc连接数据库
    handlebars的用法
  • 原文地址:https://www.cnblogs.com/zhengyingyan/p/4331912.html
Copyright © 2011-2022 走看看