javascript - dc.js:在行图末尾显示总计

Question

这类似于我问过的一个问题before .但是，我尝试显示的不是条形图，而是条形图的总计。

我尝试过相应地调整代码，但我对 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 测试版中可用，我不确定以前的版本。)