axis
image.png

d3.axisTop(scale) 创建一个Axis对象

d3.axisLeft(scale) 创建一个Axis对象

d3.axisRight(scale) 创建一个Axis对象

d3.axisBottom(scale) 创建一个Axis对象

axis.scale([scale]) 为Axis对象设置scale

axis.ticks(arguments…)

axis.ticks([count[, specifier]])

axis.ticks([interval[, specifier]])

  1. axis.ticks(10);
  2. // 等价与
  3. axis.tickArguments([10]);
  5. axis.ticks(20, "s");
  6. // 等价与
  7. axis.tickArguments([20, "s"]);
  9. // 每隔 15 分钟生成一个刻度的时间比例尺：
  10. // 等价 axis.tickArguments([d3.timeMinute.every(15)]);
  11. axis.ticks(d3.timeMinute.every(15));

axis.tickArguments([arguments])

axis.tickValues([values]) 设置刻度的值

  1. var xAxis = d3.axisBottom(x)
  2.     .tickValues([1, 2, 3, 5, 8, 13, 21]);

axis.tickFormat([format]) 格式化x轴刻度内容输出

image.png

  1. axis.tickFormat(d3.format(",.0f"));
  2. // 等价 
  3. axis.ticks(10, ",f");
  5. axis.tickFormat(function (v) {
  6.     return 'ccc' + v + '$'
  7. });

_

axis.tickPadding([padding: number]); 设置刻度与线的距离

image.png -20的效果

  1. axis.tickPadding(-20);

axis.tickSize([size]) 设置内侧和外侧刻度的长度

image.png

  1. axis.tickSize(20)

axis.tickSizeInner([size]) 设置内侧刻度的长度

image.png axis.tickSizeInner(20)

axis.tickSizeOuter([size]) 设置外侧刻度的长度

image.pngaxis.tickSizeOuter(20)
_

axis(context) <源码>

将坐标轴渲染到指定的 context, context 可能是一个包含SVG元素的 selection(SVG 或者 G 元素) 也可能是一个 transition.

例子

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <title>d3 5.15.1</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .text {
  12.             text-indent: 2em;
  13.         }
  15.         .pre {
  16.             white-space: pre-wrap;
  17.             background-color: #eee;
  18.             border: 1px solid #ccc;
  19.         }
  20.     </style>
  21.     <script src="../lib/d3.js" type="text/javascript"></script>
  22. </head>
  24. <body>
  25.     <a href="../index.html">首页</a>
  26.     <br />
  29.     <script>
  30.         var h = 200;
  31.         var w = 50;
  32.         var offsetX = 50;
  33.         var offsetY = 30;
  34.         scale = d3.scaleLinear().domain([10, 0]).range([0, h]);
  35.         axis = d3.axisLeft().scale(scale);
  36.         d3.select("body").append("svg")
  37.             .attr("width", w)
  38.             .attr("height", h + offsetX)
  39.             .append("g")
  40.             .attr("transform", `translate(${offsetX / 2}, ${offsetY})`)
  41.             .call(axis);
  43.         w = 200;
  44.         h = 50
  45.         var scale = d3.scaleLinear().domain([0, 10]).range([0, w]);
  46.         var axis = d3.axisTop(scale);
  47.         d3.select("body").append("svg")
  48.             .attr("width", w + offsetX)
  49.             .attr("height", h)
  50.             .append("g")
  51.             .attr("transform", `translate(${offsetX / 2}, ${offsetY})`)
  52.             .call(axis);
  53.     </script>
  54. </body>
  56. </html>