d3.js - 在轴上显示与 D3 中的比例函数找到的值不同的值

Question

我有一个 d3 图，它的 x 轴使用线性刻度。它看起来像这样:

  ...
y |
  |
  +-------------------------------------------
  0.0   0.5    1.0    1.5    2.0    2.5    3.0
                  Time in weeks

在此轴下方，我想显示与 x 轴对齐的数据行。像这样:

  23    23            22                   19

使用这些数据:

var nums = [23, 23, 22, 19];
var times = [0, 0.5, 1.5, 3];

times在哪里 nums应该落在 Time in weeks x 轴。所以 nums的第一个索引属于 0.0 ，第二下 0.5 ，等等。

scale 函数看起来像这样:

var x = d3.scale.linear().domain([0,3]).range([0, 600]);

所以 x(0.5)返回在新轴上显示刻度的正确范围值。但我想显示的是来自 nums 的相应值阵列。即显示 nums[times.indexOf(0.5)]的值.

有没有办法覆盖 scale()由 d3.svg.axis() 使用以便显示 nums值而不是 times仍在使用的值 times作为输入域？

编辑

Here is a demo

编辑 2

感谢 ne8il 的回答，我想通了。答案并不完整，但它构成了此代码的基础:

var x1Axis = d3.svg.axis()
      .scale(x1)
      .ticks(nums)
      .tickValues(times)
      .tickFormat(function(x){return nums[times.indexOf(x)];})

Working example

Answer 1

我相信在这种情况下你可以做到

d3.svg.axis().ticks(times).tickValues(nums);

它会将每个“时间”传递到您的比例函数中以将其映射到 x 坐标，并使用“nums”中的相应索引值来输出文本。
Source is here