分别控制y轴线和y轴标签的定位

Question

我正在使用 d3 创建条形图。条形图接受负值。我正在创建的图表是 based on this chart here，并且大部分具有相似的设置。

我想做的改变是将 y 轴的文本标签移动到图表的绝对左侧，但将 y 轴线保持在其原始位置。

从上面link开始，下面是渲染y轴的代码行（它们在页面底部，几乎是代码的最后）

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + x(0) + ",0)")
  .call(yAxis);

现在，如果我将上面的 translate 行调整为以下

    .attr("transform", "translate(0,0)")

然后轴线和标签都将左对齐。我想将轴线保持在其位置，但将所有标签向左移动。

我该怎么做？

PS。我想到的一个解决方案是创建第二个 y 轴。第一个 y 轴隐藏在显示的标签中，并显示在左侧。显示了第二个 y 轴，但标签被隐藏，并且位于中心。但是，我不喜欢这个解决方案，我认为它不是很干净。

谢谢。

Answer 1

只需增加刻度填充：

.tickPadding(width/2 - margin.left);