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

Question

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

我

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

为什么 x 轴太短？

Answer 1

较老的问题，也是我对 Stack 的第一个答案尝试，但希望仍然有用：

据我所知，您的 X 域只转到 XMax，这将是图表最后一根柱的左下角 - 它不会"短"，它只是不知道 XMax 之后的条有多宽。

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

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

Answer 2

x 轴不太短（对于您的最大值来说，它正好足够高），但您可能希望它很好。

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