Question

I'm trying to implement bar totals at with bar charts in a very similar manner as you would with row charts. For row charts, the code would be

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

This will return a chart with the values of it at the end of the row charts with the elasticX functionality. However, when it comes to bar chart, you would have to implement a renderlet solution like this and this where you have to manually draw the bar totals.

The issue I have with this approach is that 1) the y domain isn't elastic, so if there are wide variations in your selections, the bar totals may not show, and 2) you have to manually determine the range for the y axis.

Is there a more elegant way to create bar totals in a more elegant way without relying on the renderlet solution, something preferably similar to the row chart solution?

Answer 1

不，没有更优雅的方式，直到此功能适当地进入dc.js。

但是，您可以解决您所描述的问题：坐标网格mixin支持内部填充yAxisPadding，以便在启用elasticY时保留额外空间。

这应该将标签保留在边界内。

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

Answer 2

yAxisPadding可以使用，但最终会在条形图的上方和下方填充，这几乎是您想要的。

如果您用总是返回yAxisMin的内容覆盖0函数，则应进行设置，例如：

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: Bar Totals with ElasticY

2 个答案: