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

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

    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;
    });

最新答复： D3引入了一个重要的变化：

Tween函数现在可以使用

此

引用当前节点

因此，使用D3V5.8.0或更高版本，您的代码可以按原样运行

---

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

这个
在最内部函数中的含义

与大多数D3方法一样，
这个
是当前的DOM元素。因为这没什么不同：

当转换开始时，将按顺序为每个选定元素计算值函数，并将当前数据d和索引i传递给
this
上下文作为当前DOM元素。（强调矿山）

然而，在这个内部函数中，
这个
只是一个例子

最简单的解决方案是在外部函数中使用
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数据=[
“你好”，
“世界！”，
“怎么了？”
];
var i=0；
变量主体=d3。选择（“主体”）；
var元素=body.append（“svg”）；
元素。追加（“文本”）
.数据（数据）
.文本（功能（d）{
返回d
})
.attr（“x”，150）
.attr（“y”，75）
.attr（“文本锚定”、“中间”）
.on（“单击”，函数（）{
d3.选择（this）.transition（）
.持续时间（5000）
.ease（d3.easeLinear）
.tween（“文本”，函数（）{
var self=这个；
var newText=数据[i]；
var textLength=newText.length；
返回函数（t）{
self.textContent=newText.slice（0，数学四舍五入（t*textLength））；
};
});
//数据的环绕函数
i=（i+1）%data.length；
});
非常感谢！有没有洞察到为什么使用“this”的方式会导致问题？