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

Question

我使用 dc.js 和交叉过滤器创建了堆积条形图。我正在沿 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)");
  });

Working jsfiddle

Answer 1

我认为您运行关注这个问题：elasticX for linear domain doesn't include the rightmost bar

（或类似问题。）

dc.js 非常字面地接受它的边界，它也按字面计算它们，以至于它没有考虑它自己的条的宽度。

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

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

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

当然，您最终会得到填满图表的单个条形图：

因此，您可能希望在 preRedraw 中手动计算域，直到 dc.js 在这方面做得更好。

你的 fiddle 分支：https://jsfiddle.net/gordonwoodhull/97h8kd5g/2/

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

dc.js Stacked Bar Chart having only one column and with elastic X Axis is not rendered properly

javascript

bar-chart

d3.js

crossfilter

dc.js