如何更新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線圖上的標籤？

回答

相關問題