Javascript 如何更新d3线图上的标签？

我试图在每一行的末尾都有一个标签，而我把所有的标签都放在一个地方。它甚至不更新标签，而是在标签旁边创建一个新标签

以下是我添加标签的方式：

   linesGroup.append("g")
      .style("font-size","12px")
      .append("text")

      .datum(function(d) {return linedata.points[0] ; })
        .attr("transform", function(d) {
         return "translate(" + x(d.created_at) + "," +       y(d.rate) + ")"; 
         })
      .attr("x", 3)
      .attr("dy", ".35em")
    .text(function(d){return (d.tag+"-"+d.rate);});  

---

这是我的JSFIDLE链接

您将获得未定义的标签，因为在

redrawwithoutanimation

函数中，您正在添加新点，但没有在新点中创建标记属性：

    var new_point = {
        rate: removedPoint.rate,
        created_at: lastpoint.created_at + 6000,
        tag: removedPoint.tag
    };

请参阅我添加的

tag:removedPoint.tag

，这将修复未定义的问题

而且，要在每一行之后获得标签，您必须使用

enter（）

和

data（）

---

您总是

附加新标签。您需要使用现有的标签。您也可以在创建新标签之前删除旧标签，但您需要某种方法来标识要删除的元素，例如，在添加新标签之前，为您的标签添加一个类“temporaryLabel”，然后使用d3.selectAll（“g.temporaryLabel”）.remove（）.我甚至没有将标签放在正确的位置。当我移除标签时，我得到的是一个未定义的标签！！这是更新的代码
linesGroup.selectAll("g.line-label").data(chart_data).enter().append("g")
        .attr("class", "line-label")
        .style("font-size", "12px")
        .append("text")
        .datum(function (d) {
          return d.points[0];
        })
        .attr("transform", function (d) {
          return "translate(" + x.range()[1] + "," + y(d.rate) + ")";
        })
        .attr("x", 3)
        .attr("dy", ".35em")
        .text(function (d) {
        return (d.tag + "-" + d.rate);
    });