dc.js：在行图表末尾显示总计

Question

这与我问过的问题类似。但是，我尝试显示的不是条形图，而是条形图的总计。

我尝试过相应地调整代码，但我对JS的熟悉程度很低。以下是我的尝试，如有任何帮助，将不胜感激。

      genderChart.on('renderlet', function (chart) {

    var rowData = [];
    var rows = chart.selectAll('.row').each(function (d) {
      rowsData.push(d);
    });

    //Remove old values (if found)
    d3.select(rows[0][0].parentNode).select('#inline-labels').remove();
    //Create group for labels
    var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id', 'inline-labels');

    for (var i = rows[0].length - 1; i >= 0; i--) {

      var b = rows[0][i];

      gLabels.append("text")
          .text(d3.format(",f")(rowsData[i].data.value))
          .attr('x', +b.getAttribute('x') + (b.getAttribute('width') + 20)
          .attr('y', +b.getAttribute('y'))
          .attr('text-anchor', 'middle')
          .attr('fill', 'black');
    }
  });

现在控制台中没有错误，所以它正在正确呈现......某处。到目前为止，文本没有出现在我的行图附近的任何地方。谢谢！

Answer 1

作为您方法的替代方法，您可以尝试使用 renderTitleLabel。

像这样：

genderChart
  .title(function(d) {
    return d.value; // or your custom value accessor
  })
  .renderTitleLabel(true)
  .titleLabelOffsetX(10); // optional offset from the right side of the chart

（这在 2.0 测试版中可用，我不确定以前的版本。）

dc.js：在行图表末尾显示总计

dc.js: Show sum totals at end of rowChart

javascript

dc.js