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

我想在每一行的结尾都有一个标签，而我将所有标签都放在一个地方。它甚至不更新标签，而是在旁边创建一个新标签。如何更新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);});

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

来源

2013-12-12 fenec

你总是'append'ing新标签。您需要使用现有的。 –

您也可以在创建新标签之前删除旧标签，但您需要某种方法来标识要删除的元素，例如给“临时标签”类，然后d3.selectAll（“g .temporaryLabel“）。remove（）就在你追加新的一个之前。 – Elijah

我甚至没有在正确的地方获得标签 – fenec

你得到未定义的标签，因为里面redrawwithoutanimation功能，您要添加新的点，而不是创建一个标签物业新点：

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

看到我添加tag:removedPoint.tag，这应该可以解决undefin编辑问题。

而且，为了获得每行后的标签，你将不得不使用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

来源

2013-12-13 07:36:07 Yogesh

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

回答

相关问题