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

现在控制台中没有错误，所以它正在正确渲染... somwhere。到目前为止，文本没有出现在我的行图附近。谢谢！

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：显示rowChart末尾的总和

1 个答案: