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

Question

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

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

为什么x轴太短了？

Answer 1

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

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

(它不考虑您添加 20 像素的 barWidth，并且您的文本位置确实考虑了额外的宽度，这似乎就是为什么您只看到 Axis 的问题。)

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