Javascript D3如何更新文本?
我已经创建了一些有价值的文本节点。因此,每当数据更新时,只有值应该更新,文本节点不应该再次创建Javascript D3如何更新文本?,javascript,html,d3.js,Javascript,Html,D3.js,我已经创建了一些有价值的文本节点。因此,每当数据更新时,只有值应该更新,文本节点不应该再次创建 systemLevel .enter() .append('g') .classed("system-level", true) .attr("depth", function(d, i) { return i; }) .each(function(d, i) { var columnHeader = graphHeaders.append("g")
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上创建了一个示例。
我不确定,如何只更新文本值。感谢您的帮助 您没有使用通常的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。那么到底是什么问题?D3更新模式包含在许多教程中,例如,我参考了许多关于更新的教程,但仍然无法在这个特定场景中使用它。非常感谢Lars,它工作得非常好。另一个问题-如果不同的文本节点需要不同的属性怎么办?将这些属性作为数据的一部分并相应地设置,例如
.attr(“font size”,function(d){return d.fontSize;})
。