Javascript D3：向多线图添加数据值标签

我正在使用这个多行图，但到目前为止，未能在每个刻度（每天）上生成数据值标签

上面的代码给出了：

这就是我想要实现的

我知道我必须使用.append（“text”）并将文本定位在与数据点大致相同的x，y坐标处，然后从数据中提取值以输入到“text”中，但我在集成该概念时遇到了困难

我怀疑选择将与valueline.append一起发生？我看了一堆例子，我不认为有数据值标签的线形图存在，如果有，请给我指一下：）

---

有什么想法吗？

您的文本将不可见，因为它位于svg的边界之外：您添加了一个翻译为margin.left的组，并将x放置在宽度+3处，这意味着位于svg左边框的宽度+3+margin.left处

尝试用以下内容替换附加文本：

svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + y(data[0].sev4) + ")")
    .attr("dy", ".35em")
    .attr("text-anchor", "start")
    .style("fill", "red")
    .text("Sev4");

svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + y(data[0].sev3) + ")")
    .attr("dy", ".35em")
    .attr("text-anchor", "start")
    .style("fill", "steelblue")
    .text("Sev3");

我没有测试它，所以我不能保证，但是你的代码看起来很好，这是我唯一看到的

此添加的结果：

编辑

在您澄清之后，这里是一个提示：

您将感兴趣的部分是：

svg.append('g')
.classed('labels-group', true)
.selectAll('text')
.data(data)
.enter()
.append('text')
.classed('label', true)
.attr({
  'x': function(d, i) {
    return x(d.date);
  },
  'y': function(d, i) {
    return y(d.sev3);
  }
})
.text(function(d, i) {
  return d.sev3;
});

---

这将绘制您的标签。这是你想要达到的结果吗？

得分！！我甚至能够将数据点标签添加到第二个系列中，因为您的示例非常清楚。我意识到，我将不得不回到D3的基础，虽然，我从来没有想到这一点，我自己。非常感谢你的回答！太好了，很高兴听到！enter-update-delete模式有点难理解，我花了一点时间才得到它。我回复了一篇文章，其中提供了更多的信息：

svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + y(data[0].sev4) + ")")
    .attr("dy", ".35em")
    .attr("text-anchor", "start")
    .style("fill", "red")
    .text("Sev4");

svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + y(data[0].sev3) + ")")
    .attr("dy", ".35em")
    .attr("text-anchor", "start")
    .style("fill", "steelblue")
    .text("Sev3");

svg.append('g')
.classed('labels-group', true)
.selectAll('text')
.data(data)
.enter()
.append('text')
.classed('label', true)
.attr({
  'x': function(d, i) {
    return x(d.date);
  },
  'y': function(d, i) {
    return y(d.sev3);
  }
})
.text(function(d, i) {
  return d.sev3;
});