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

Question

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

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

为什么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();