D3 - 如何在不移动刻度的情况下扩展 x 轴？答案

【问题标题】：D3 - How to extend x-axis without shifting ticks?D3 - 如何在不移动刻度的情况下扩展 x 轴？
【发布时间】：2021-01-23 23:52:28
【问题描述】：

我很难找到将 d3 的 x 轴延伸到最后一个刻度之外的方法。我有差距的原因是因为我正在渲染一个条形图，我希望每个条形图都以刻度为中心（效果很好）。

有没有办法在不移动每个刻度的位置的情况下，延长x轴以缩小x轴和y轴之间的间隙？

我创建了一个简单的codesandbox 来演示该问题，为方便起见，这里有一个屏幕截图：

【问题讨论】：

丑陋但简单，你可以通过更新 d 属性来扩展 path 元素
我也在考虑这个问题，但是有没有可靠的方法可以知道H 命令的值应该是什么？
我认为是这样，它应该只取决于您提供的规模。我还发现了这个stackoverflow.com/questions/36989524/…

标签： javascript svg d3.js

【解决方案1】：

正如@ee2Dev 指出的，我们可以为此添加一个新的<path />。

D3 让它变得如此简单：

d3.select(xAxisRef.current)
  .call(d3.axisBottom().scale(xScale))
  .append("path")
  .attr("d", `M0.5,6V0.5H916`)
  .attr("stroke", "currentColor");

查看更新后的codesandbox

M0.5,6V0.5H916 值主要是从其他 SVG 路径的绘制命令复制而来，并通过反复试验进行了轻微更改。

【讨论】：