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

【问题标题】：D3.js - Width of xAxis for a bar chart too shortD3.js - 条形图的 xAxis 宽度太短
【发布时间】：2012-09-23 05:44:18
【问题描述】：

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

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

为什么x轴太短了？

【问题讨论】：

【解决方案1】：

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

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

（它不考虑您添加 20 像素的 barWidth，而您的文本位置确实考虑了额外的宽度，这似乎是您只看到 Axis 问题的原因。）

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

【讨论】：

【解决方案2】：

x 轴并不太短（它的高度正好足以满足您的最大值），但您可能希望它是 nice。

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

【讨论】：