D3 条形图 - 最后一个条形悬垂在 X 轴的末端答案

【问题标题】：D3 bar chart - last bar overhangs the end of the X axisD3 条形图 - 最后一个条形悬垂在 X 轴的末端
【发布时间】：2014-05-21 19:00:00
【问题描述】：

我有一个 D3 堆积条形图，它工作得很好，除了最后一个条形悬垂在 X 轴的右侧并且轴的左侧没有接触 Y 轴。这是因为我必须移动这些条，以便它们位于刻度线的中心。我想，如果我在任一端用日期填充时间刻度就可以了，但条形图只是展开以占用可用空间。

这是一个 JSFiddle：http://jsfiddle.net/goodspeedj/cvjQq/

这是 X 比例：

var main_x = d3.time.scale().range([0, main_width-axis_offset - 5]);

这是我尝试在 X 轴两端填充日期：

main_x.domain([
    d3.min(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() - 1); 
    }), 
    d3.max(data.result, function(d) { 
        return d.date.setDate(d.date.getDate() + 1); 
    }
)]);

柱上 x 属性的计算为：

.attr("x", function(d) { return main_x(d.date) - (main_width/len)/2; })

这是一件小事，但它真的让我很烦。谢谢！

【问题讨论】：

This question 可能会有所帮助。
我尝试了该帖子中的解决方案，但最后一个栏被削减了一半（一定是做错了什么）。稍后我会尝试发布一个小提琴。谢谢。
我现在可以看到我正在使用一个较小的数据集，问题实际上是 X 轴没有正确排列：jsfiddle.net/goodspeedj/cvjQq 我知道这是因为 main_x 时间尺度，但不是确定修复它的最佳方法是什么。
问题是您正在附加一个剪辑路径来剪辑图形。如果您删除它，它会正常工作：jsfiddle.net/cvjQq/2
很好，但最后一根柱子仍然悬在 X 轴的末端。在域中增加一天似乎没有帮助。

标签： javascript d3.js

【解决方案1】：

主要问题是您的 SVG 中有一个剪切路径，它剪切了部分绘图区域。删除后，您可以看到完整的图表，但第一个和最后一个条形仍将“悬挂”在轴的末端。

要改变这一点，您必须延长轴，例如通过在计算规模的最小值和最大值时添加一两天。

【讨论】：