我正在尝试创建一些脚本，以便在较大的SVG中的三个不同状态之间插入3个不同的数字，并在其中进行一些其他基于路径的动画。
我在弄清楚如何在三个不同数字状态之间转换数字时遇到麻烦。我一直在研究this和解决方案jsfiddle。我似乎无法获得使它在单组数字之间进行补间的代码，更不用说在多个数字之间了。
值得注意的是，我试图为SVG的其他几个部分（不同布置之间的各种路径之间的变化）设置动画，因此我试图为此明确选择文本的一小部分。我猜这是我出问题了。
我的代码（jsfiddle）：
HTML：
<html>
<head>
<svg xmlns="http://www.w3.org/2000/svg" width="120.04018" height="200.03999" viewBox="0 200.04018 150.03999">
<path class="a" d="M70,60,50" transform="translate(-0.54324 -0.36)"/>
<text class ="p" x = '80' y = '80'>123</text>
<text class ="i" x = '80' y = '90'>555</text>
</svg>
<script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
</body>
</html>
D3：
var pakmin = [100],pakmed = [200],pakmax = [300];
d3.select("text.p")
.data(pakmax)
.enter()
.append("text.p")
.text(pakmed)
.transition()
.duration(5000)
.tween("text",function(d) {
var i = d3.interpolate(this.textContent,d),prec = (d + "").split("."),round = (prec.length > 1) ? Math.pow(10,prec[1].length) : 1;
return function(t) {
this.textContent = Math.round(i(t) * round) / round;
};
});
简而言之，我的目标是使pakmax>补间到> pakmed>补间到> pakmin，然后重复。然后，我想对其他两个结构类似的数据集重复该模式。
有什么建议吗？