dc.js：具有弹性的条形总计

Question

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

    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 "";
      });

这将 return 一个图表，其值位于具有 elasticX 功能的行图表的末尾。但是，对于条形图，您必须实施 renderlet 解决方案，例如 and this，您必须在其中手动绘制条形总计。

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

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

Answer 1

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

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

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

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

Answer 2

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

如果您用总是 returns 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;

dc.js：具有弹性的条形总计

dc.js: Bar Totals with ElasticY

javascript

charts

d3.js

dc.js