[英]D3 how to update text?
我創建了具有一定價值的文本節點。 因此,每當數據更新時,只應更新值,不應再次創建文本節點。
systemLevel
.enter()
.append('g')
.classed("system-level", true)
.attr("depth", function(d, i) {
return i;
})
.each(function(d, i) {
var columnHeader = graphHeaders.append("g")
.classed("system-column-header", true);
columnHeader.append('text')
.attr('font-size', '14')
.attr('font-weight', 'bold')
.attr('fill', "red")
.attr('x', 50 * i)
.attr('y', 50)
.text(function() {
return d.newUser;
});
columnHeader.append('text')
.attr('font-size', '14')
.attr('font-weight', 'bold')
.attr('fill', "blue")
.attr('x', 50* i)
.attr('y', 70)
.text(function() {
return d.value;
});
});
我在Js Bin上創建了一個例子。 https://jsbin.com/dixeqe/edit?js,output
我不確定,如何只更新文本值。 任何幫助表示贊賞!
您沒有使用許多教程中描述的常用D3更新模式(例如此處 )。 您需要重新構建代碼以使用它而不是無條件地追加新元素:
var columnHeader = graphHeaders.selectAll("g").data(dataset);
columnHeader.enter().append("g").classed("system-column-header", true);
var texts = columnHeader.selectAll("text").data(function(d) { return [d.newUser, d.value]; });
texts.enter().append("text")
.attr('font-size', '14')
.attr('font-weight', 'bold')
.attr('fill', "red")
.attr('x', function(d, i, j) { return 50 * j; })
.attr('y', function(d, i) { return 50 + 20 * i; });
texts.text(function(d) { return d; });
在這里修改了jsbin。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.