Javascript 只有一列且具有弹性X轴的dc.js堆叠条形图未正确渲染

我使用dc.js和crossfilter创建了一个堆叠条形图。我使用了沿x轴的时间延迟，并且使其具有弹性。但是，当堆叠条形图中只有一列时（由于数据或其他图表的交叉过滤），该图表似乎无法正确呈现

之前：

过滤后，图形不显示任何列，或者可能是隐藏的：

作为一种解决方法，我在数据的最小和最大日期中添加了一个月作为虚拟数据，但即使这样也没有帮助。所以我决定取消弹性x轴。但是如果没有弹性x轴，图表看起来非常稀疏&当数据被过滤时很糟糕

我已经搜索了很多帖子，但似乎没有找到任何有用的解决方案。如果有人能给我指出正确的方向，我会很高兴的。这就是我目前设置图表的方式

  chart
  .width(768)
  .height(480)
  .margins({
    left: 80,
    top: 20,
    right: 10,
    bottom: 80
  })
  .x(d3.time.scale()).elasticX(true)
  .round(d3.time.month.round)
  .alwaysUseRounding(true)
  .xUnits(d3.time.months)
  .brushOn(false)
  .xAxisLabel('Months')
  .yAxisLabel("Expected Sales (in thousands)")
  .dimension(dimMonthYear)
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(true)
  .legend(dc.legend().x(130).y(30).itemHeight(13).gap(5))
  .group(combinedGroup, "Understand", sel_stack(0))
  .stack(combinedGroup, "Propose", sel_stack(1))
  .stack(combinedGroup, "Negotiate", sel_stack(2))
  .stack(combinedGroup, "Decide", sel_stack(3))
  .stack(combinedGroup, "Deliver", sel_stack(4))
  .centerBar(true)
  .elasticY(true)
  .elasticX(true)
  .renderlet(function(chart) {
    chart.selectAll("g.x text").attr('dx', '-30').attr(
      'dy', '-7').attr('transform', "rotate(-60)");
  });

---

我认为您遇到了这个问题：

（或类似问题。）

dc.js从字面上理解它的边界，它也从字面上计算它们，以至于它没有考虑它自己的条的宽度

解决此问题的一个简单方法是添加一些填充：

.xAxisPadding(1).xAxisPaddingUnit('month')

由于您是按月份聚合的，这将确保计算域的左侧和右侧始终有一个月（当只有一个栏时，宽度为0）

当然，您最终会看到一个条形图填满图表：

因此，您可能希望在

preRedraw

中手动计算域，直到dc.js在这方面做得更好

---

你的叉子：

我想你遇到了这个问题：

（或类似问题。）

dc.js从字面上理解它的边界，它也从字面上计算它们，以至于它没有考虑它自己的条的宽度

解决此问题的一个简单方法是添加一些填充：

.xAxisPadding(1).xAxisPaddingUnit('month')

由于您是按月份聚合的，这将确保计算域的左侧和右侧始终有一个月（当只有一个栏时，宽度为0）

当然，您最终会看到一个条形图填满图表：

因此，您可能希望在

preRedraw

中手动计算域，直到dc.js在这方面做得更好

你的提琴叉：

.xaxispading（1）.xaxispadingunit（'month'）

对我来说非常有用。我可以暂时用一个栏目来填充图表。顺便说一句，我真的很感谢dc.js，更感谢您帮助我越来越多地理解这个奇妙的库。干杯

.xAxisPadding（1）.xAxisPaddingUnit（'month'）

对我来说非常有用。我可以暂时用一个栏目来填充图表。顺便说一句，我真的很感谢dc.js，更感谢您帮助我越来越多地理解这个奇妙的库。干杯