d3.js 补间文本动画在 selectAll 与数据后不起作用

Posted 2023-02-22

【中文标题】d3.js 补间文本动画在 selectAll 与数据后不起作用

【英文标题】：d3.js tweening text animation not working after selectAll with data

【发布时间】：2014-04-24 09:54:37

【问题描述】：

我正在尝试在 d3.js 中为甜甜圈图上的标签创建一个股票行情样式递增值文本过渡。圆环图可以正常工作，如果我不使用“数据”和“输入”，标签也可以工作，但是当我移到更高级的版本时，我无法再让转换工作了

有人能解释为什么下面的方法不起作用，但只是应用 as .text() 没有转换确实应用了值？

var text = svg.select(".labels").selectAll("text")
                .data(pie(data), key);

        text.enter()
            .append("svg:text")
            .attr("dy", ".35em")
            .attr("class", "text-label")
            .transition()
            .tween("text", function(d) 
                console.log(d);
                console.log(this.textContent);
                var i = d3.interpolate(0, d.data.value),
                    prec = (d.value + "").split("."),
                    round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;

                return function(t) 
                    this.textContent = (Math.round(i(t) * round) / round) + '%';
                ;
            );

【问题讨论】：

您是否收到任何错误消息？

首先，你代码底部的function(t)...需要返回一个值。您的函数不返回任何值。如果您可以发布执行代码的html或svg结果会更好。

【参考方案1】：

尝试更改此行 prec = (d.value + "").split(".") 到 prec = (d.data.value + "").split(".")