javascript - D3.js - 条形图的 xAxis 宽度太短

Question

我使用 D3.js 创建了一个条形图 ( fiddle )。

我有一个(可能非常简单)问题，我很高兴得到一些支持:

为什么x轴太短？

Answer 1

较旧的问题，也是我在 Stack 上的第一次回答尝试，但希望仍然有用:

据我所知，你的 X 域只会到达 XMax，这将是图表最后一个条形的左下角 - 它不会出现“短”，它只是不知道条形有多宽在 XMax 之后。

(它没有考虑您添加 20 像素的 barWidth，并且您的文本位置确实考虑了额外的宽度，这似乎就是您仅在轴上看到问题的原因。)

为了将轴一直延伸到末尾，您必须考虑域中的附加 barWidth，或以其他方式附加附加 barWidth。这可以通过在 xMax 中再添加半天左右，或者将每个条形移动到其 X 位置 (-barWidth) 的左侧而不是 +barWidth 来实现。