Question

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

这就是我添加标签的方式：

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

这是我的jsfiddle链接http://jsfiddle.net/GsaGb/9/

Answer 1

您正在获取未定义的标签，因为在redrawwithoutanimation函数内，您要添加新点但不在新点中创建标记属性：

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

看到我添加了tag:removedPoint.tag，这应该可以修复未定义的问题。

而且，要在每行之后获取标签，您必须使用enter()和data()

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

updated fiddle

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

1 个答案: