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

Question

我正在使用d3创建条形图。条形图接受负值。我创建的图表是based on this chart here，大多数都有类似的设置。

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

从上面的链接中，以下是渲染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);