更改 D3 中的轴显示值

Question

我想更改图表中 y 轴的值，例如，不显示 [0,18]，而是显示 [-18,0]。

我的轴初始代码是：

        var y = d3.scale.linear().range([height, 0]);

        var yAxis = d3.svg.axis()
                  .scale(y)
                  .orient("left");

我试着这样修改它：

        var yAxisInv = d3.svg.axis()
                  .scale(y)
                  .orient("left")
                  .ticks(10)
                  .tickValues([-18, -16, -14, -12, -10, -8, -6, -4, -2, 0]);

但它只是沿着整个轴向下移动。我想做的是在不改变数据的情况下改变显示值

在图像中，它看起来像这样：

Answer 1

您可以使用 tickFormat 函数来定义您希望各个刻度出现的方式。

我认为像下面这样的东西会起作用：

    var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");
              .tickFormat(function(d) {
                  return -18+d;
              })

更改 D3 中的轴显示值

Change axis displayed value in D3

label

axis

d3.js