是否可以将标记点添加到 dc.js 折线图？答案

【问题标题】：Is it possible to add labeled points to a dc.js line chart?是否可以将标记点添加到 dc.js 折线图？
【发布时间】：2015-12-02 05:11:53
【问题描述】：

我喜欢 dcjs，http://bl.ocks.org/d3noob/6584483，但问题是我在折线图的任何地方都看不到任何标签（每小时事件数）。是否可以在每个数据点尖端的圆点内添加显示在数据点上方的标签，甚至更好？

【问题讨论】：

这有一个 PR，请尝试并在那里留下评论。 github.com/dc-js/dc.js/pull/1045 圆点的想法很酷，我想如果字体和文字真的很小的话。
假设数据点较少并且相对于图表的大小，点也可能更大。您如何使用此类拉取请求，您是否只是将 sn-p 复制并粘贴到您的库版本中？通常我只是使用 bower 并获得最新版本。
是的，如果你不熟悉 git/npm/grunt，你可以复制粘贴，这样可能会更容易。我们确实可以选择始终显示点；我想调整点的大小以适应文本将是困难的部分，但我已经在其他地方做到了。这是一个很酷的主意。

标签： d3.js dc.js crossfilter

【解决方案1】：

我尝试在拉取请求中应用这些概念并提出：

function getLayers(chart){
  var chartBody = chart.chartBodyG();
  var layersList = chartBody.selectAll('g.label-list');

  if (layersList.empty()) {
    layersList = chartBody.append('g').attr('class', 'label-list');
  }

  var layers = layersList.data(chart.data());
  return layers;
}

function addDataLabelToLineChart(chart){
  var LABEL_FONTSIZE = 50;
  var LABEL_PADDING = -19;
  var layers = getLayers(chart);
  layers.each(function (d, layerIndex) {
    var layer = d3.select(this);
    var labels = layer.selectAll('text.lineLabel')
    .data(d.values, dc.pluck('x'));

    labels.enter()
      .append('text')
      .attr('class', 'lineLabel')
      .attr('text-anchor', 'middle')
      .attr('x', function (d) {
        return dc.utils.safeNumber(chart.x()(d.x));
      })
      .attr('y', function (d) {
        var y = chart.y()(d.y + d.y0) - LABEL_PADDING;
        return dc.utils.safeNumber(y);
      })
      .attr('fill', 'white')
      .style('font-size', LABEL_FONTSIZE + "px")
      .text(function (d) {
        return chart.label()(d);
      });

      dc.transition(labels.exit(), chart.transitionDuration())
        .attr('height', 0)
        .remove();
  });
}

我将“层”更改为一个新组，而不是使用现有的“堆栈列表”组，以便将其添加到数据点之后，从而在它们之上进行渲染。

这是这个 hack 的一个小技巧：https://jsfiddle.net/bsx0vmok/

【讨论】：