D3如何更新文本？

Question

我已经创建了一些具有某些值的文本节点。因此，每当数据更新时，只有该值应该更新，文本节点不应再次创建。

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 我不确定如何仅更新文本值。希望得到帮助！

- user2532865

---

那么问题到底是什么？D3更新模式在许多教程中都有涉及，例如http://bost.ocks.org/mike/circles/。 - Lars Kotthoff

我已经参考了许多关于更新的教程，但仍然无法在这种特定情况下使用它。 - user2532865

Answer 1

您没有使用通常的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; });

Modified jsbin here.

- Lars Kotthoff

---

非常感谢Lars，它完美地运行了。另一个问题是 - 如果我们需要不同的属性用于不同的文本节点怎么办？ - user2532865

将这些数据部分添加到代码中，并相应地设置，例如：.attr("font-size", function(d) { return d.fontSize; })。 - Lars Kotthoff