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

Question

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

我有一个（可能非常简单）的问题，我很乐意得到一些支持：

为什么x轴太短？

Answer 1

更老的问题，我在Stack上的第一次尝试尝试，但希望仍然有用：

从我可以告诉你的X域只能转到XMax，这将是图表最后一栏的左下角 - 它不会出现“短”，它只是不知道有多宽是在XMax之后。

（它不会考虑您添加20个像素的barWidth，并且您的文字放置确实考虑了额外的宽度，这似乎是您仅通过Axis看到问题的原因。）

为了将轴一直延伸到最后，您必须考虑域中的额外barWidth，或者以另一种方式附加额外的barWidth。这可能是通过在xMax中添加另一半左右，或者将每个条移动到其X位置的左侧（-barWidth）而不是+ barWidth。

Answer 2

x轴不是太短（它的高度足以达到你的最大值），但你可能希望它是nice。

var y = d3.scale.linear()
    .domain([0, yMax])
    .range([h - margin.top - margin.bottom, 0])
    .nice();