2

我有一个 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 weeksx 轴上的位置。所以第一个索引在nums下0.0，第二个在 下0.5，依此类推。

比例函数看起来像这样：

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值而不是值？timestimes

编辑

这是一个演示

编辑 2

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

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

工作示例

4

1 回答 1

3

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

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

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

于 2013-08-12T13:07:09.647 回答