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

Question

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

Answer 1

我试图在pull请求中应用这些概念并提出：

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

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

这是此骇客的小提琴：https://jsfiddle.net/bsx0vmok/