如何使用补间函数更新 d3.js 中的文本内容？

Question

我正在尝试在单击时更新我的​​文本元素，以便像键入时一样推出。当我单击文本时，它应该从数据数组中提取下一个文本元素并逐个字符打印直到完成，但是，什么也没有发生。虽然没有抛出错误。下面附上代码。

    var data = [
        "Hello",
        "World!",
        "What's up?"
       ];
    var i = 0;
    var body = d3.select("body");
    var element = body.append("svg");

   element.append("text")
       .data(data)
       .text(function(d) {return d})
       .attr("x", 150)
       .attr("y", 75)
       .attr("text-anchor", "middle")
       .attr("fill", "white")
           .on("click", function() {
               d3.select(this).transition()
                  .duration(5000)
                  .ease(d3.easeLinear)
                  .tween("text", function () {
                      var newText = data[i];
                      var textLength = newText.length;
                      return function (t) {
                          this.textContent = newText.slice(0, Math.round(t * textLength));
              };
          });

      //wrap around function for the data
      i = (i + 1) % data.length;
    });

Answer 1

更新答案：

D3 version 5.8.0 引入了一个重要的变化：

Tween 函数现在可以使用this 来引用当前节点。

因此，使用 D3 v5.8.0 或更高版本，您的代码按原样运行。

---

旧答案（适用于 v5.8.0 之前的版本）：

问题只是最里面的函数里面this的意思。

与大多数 D3 方法一样，this 是当前的 DOM 元素。 transition.tween 并没有什么不同：

当过渡开始时，为每个选定元素计算值函数，依次传递当前数据 d 和索引 i，this 上下文作为 当前 DOM 元素。 （强调我的）

但是，在该内部函数中，this 只是 window。

最简单的解决方案是在外部函数中使用var self = this：

.tween("text", function() {
    var self = this;
    var newText = data[i];
    var textLength = newText.length;
    return function(t) {
        self.textContent = newText.slice(0, Math.round(t * textLength));
    };
});

这是您的更新代码：

var data = [
  "Hello",
  "World!",
  "What's up?"
];
var i = 0;
var body = d3.select("body");
var element = body.append("svg");

element.append("text")
  .data(data)
  .text(function(d) {
    return d
  })
  .attr("x", 150)
  .attr("y", 75)
  .attr("text-anchor", "middle")
  .on("click", function() {
    d3.select(this).transition()
      .duration(5000)
      .ease(d3.easeLinear)
      .tween("text", function() {
        var self = this;
        var newText = data[i];
        var textLength = newText.length;
        return function(t) {
          self.textContent = newText.slice(0, Math.round(t * textLength));
        };
      });

    //wrap around function for the data
    i = (i + 1) % data.length;
  });

<script src="https://d3js.org/d3.v4.min.js"></script>