1 回答

TA贡献1830条经验 获得超3个赞
如果我正确理解你想要什么,你所需要的只是两个textTween
功能。例如,300
往返1000
:
var svg = d3.select("body")
.append("svg");
function textrepeat() {
var textrepeat = svg.append("text")
.attr("fill", "steelblue")
.attr("x", 30)
.attr("y", 50);
repeat();
function repeat() {
textrepeat.transition()
.duration(2000)
.textTween(function() {
return function(t) {
return ~~d3.interpolate(300, 1001)(t)
};
})
.transition()
.duration(2000)
.textTween(function() {
return function(t) {
return ~~d3.interpolate(1001, 300)(t)
};
})
.on("end", repeat);
};
};
textrepeat();
text {
font-size: 46px;
font-weight: 700;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
PS:transition.textTween
在 D3 v5.14 中添加。如果您使用的是以前的版本,请将其更改为.tween("text", function() { etc...
.
添加回答
举报