dc.js：使用 ElasticY 的条形总计答案

【问题标题】：dc.js: Bar Totals with ElasticYdc.js：使用 ElasticY 的条形总计
【发布时间】：2015-10-23 15:47:14
【问题描述】：

我正在尝试以与使用行图非常相似的方式使用条形图实现条形总计。对于行图，代码为

    Chart
      .width(500)
      .height(500)
      .dimension(chartDim)
      .group(chartGroup)
      .title(function(d) {
        return d3.format(",f")(d.value); // or your custom value accessor
      })
      .renderTitleLabel(true)
      .titleLabelOffsetX(50)
      .xAxis().tickFormat(function(v) {
        return "";
      });

这将在具有elasticX 功能的行图末尾返回一个带有其值的图表。但是，当涉及到条形图时，您必须实现 renderlet 解决方案，例如 this 和 this，您必须手动绘制条形总计。

我在使用这种方法时遇到的问题是 1) y 域没有弹性，因此如果您的选择有很大差异，条形总数可能不会显示，并且 2) 您必须手动确定y 轴。

有没有一种更优雅的方式来以更优雅的方式创建条形总计，而不依赖于 renderlet 解决方案，最好类似于行图解决方案？

【问题讨论】：

标签： javascript d3.js charts dc.js

【解决方案1】：

不，没有更优雅的方法，直到此功能使其成为正确的 dc.js。

但是，您所描述的问题有一个解决方案：坐标网格混合确实支持内部填充 yAxisPadding，以便在启用 elasticY 时保留额外空间。

这应该使标签保持在边界内。

https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#yaxispaddingpadding

【讨论】：

【解决方案2】：

yAxisPadding 有效，但您最终会在条形上方和下方都有填充，这很少是您想要的。

如果你用总是返回 0 的东西覆盖 yAxisMin 函数，你应该被设置，但是，例如：

timeChart
  .height(200)
  .brushOn(false)
  .elasticY(true)
  .x(d3.scaleBand())
  .xUnits(dc.units.ordinal)
  .yAxisLabel('Entries')
  .yAxisPadding('10%')
  .renderLabel(true)
  .dimension(timeDimension);

timeChart.yAxisMin = () => 0;

【讨论】：