D3.js 在轴上显示的值与D3中的比例函数所显示的值不同

我有一个d3图形，它的x轴使用线性比例。它看起来像这样：

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

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

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

  23    23            22                   19

使用这些数据：

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

时间

是

nums

应落在

时间（周）

x轴上的时间。因此

nums

的第一个索引属于

0.0

，第二个属于

0.5

，依此类推

比例函数如下所示：

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

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

因此

x（0.5）

返回在新轴上显示刻度的正确范围值。但是我想显示的是

nums

数组中的对应值。也就是说，显示

nums[times.indexOf（0.5）]

的值

是否有一种方法可以覆盖

d3.svg.axis（）

所使用的

scale（）

，以便它显示

nums

值，而不是

时间

值，同时仍使用

时间

作为输入域

编辑

编辑2

多亏了ne8il的回答我才明白。答案并不完整，但它构成了本准则的基础：

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

---

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

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

它会将每个“时间”传递到缩放函数中，将其映射到x坐标，并使用“nums”中相应的索引值输出文本。

---

在线性刻度中似乎不支持将数组传递给axis.ticks（）（请参阅）。无论如何，这个代码不起作用。我会给你编一个例子。很高兴能帮上忙。如果您可以将“nums”移动到数据数组本身中，那么您可以依赖它，而不是硬编码的数据数组，如下所示：。我不确定这有多大帮助，但我一直在玩弄它。是的，这是一个更好的数据结构，但我正在处理的应用程序有一个完全不同的数据结构，所以我只需使用

.map（）

提取

时间

和

nums

。