我之前在使用dc.js做柱状图时也踩过这个柱子溢出X轴的坑，给你几个亲测有效的解决方案：

1. 调整Ordinal轴的内外边距（最常用） #

当你使用dc.units.ordinal时，dc.js默认会让柱子填满每个刻度的空间，数据分类少的时候就容易撑出X轴。这时候可以通过.barPadding()和.outerPadding()手动控制间距：

pubChart
  .xUnits(dc.units.ordinal)
  .barPadding(0.2) // 柱子之间的内边距，取值0-1，越大间距越宽
  .outerPadding(0.1); // 图表左右两侧的外边距，避免柱子贴边或溢出

可以慢慢调整这两个数值，直到柱子刚好适配X轴的范围。

2. 确保X轴定义域匹配数据 #

有时候溢出是因为X轴的范围没有完全覆盖你的数据分类。你可以手动指定ordinal轴的domain，确保包含所有数据点：

// 先获取数据维度
var xDim = pubCrossfilter.dimension(function(d) { return d.yourCategoryField; });
// 设置X轴刻度为数据中的所有分类
pubChart
  .x(d3.scale.ordinal().domain(xDim.top(Infinity).map(item => item.yourCategoryField)))
  .xUnits(dc.units.ordinal);

这样能保证X轴的范围刚好贴合你的数据，不会出现柱子超出刻度的情况。

3. 修正xUnits的自定义返回值 #

你之前用xUnits(function() { return 10; })的问题在于，硬写的数值如果和实际数据点数量不匹配，会导致dc.js计算柱子宽度出错。如果是连续型数据，应该用对应单位（比如dc.units.integers）；如果是ordinal数据，最好返回实际的数据点数量：

.xUnits(function() { return xDim.top(Infinity).length; })

这样柱子宽度会根据实际数据数量自动适配。

4. 检查容器与图表宽度设置 #

最后别忘了确认图表容器#publication-chart的CSS宽度是否合理，同时给dc.js图表指定明确宽度：

#publication-chart {
  width: 100%;
  max-width: 900px; /* 根据你的页面布局调整 */
}

pubChart
  .width(900) // 和容器最大宽度对应
  // 其他配置...

容器太窄的话，柱子很容易被挤得溢出X轴。

内容的提问来源于stack exchange，提问作者Chubbs