如何在d3中实现这种过渡效果

How to achieve this transition effect in d3?

本文关键字：过渡效果 实现 d3      更新时间：2023-09-26

我对d3非常陌生，想知道如何实现这种效果，其中多条线始终与圆的周长相切。

这是我目前所看到的:http://jsfiddle.net/tz5KT/181/

function transition() {
svg.selectAll(".lines")
    .attr("x2", function (d) {
        var tangent = findTangent(d.x, d.y);
        return tangent.x;
    })
    .attr("y2", function (d) {
        var tangent = findTangent(d.x, d.y);
        return tangent.y;
    });
circleX = getRandom(0, width),
circleY = getRandom(0, height);
svg.select(".circle").transition()
    .duration(1500)
    .attr("cx", circleX)
    .attr("cy", circleY)
    .each("end", transition);
}

我只是不确定如何将这些线从一个位置过渡到下一个位置，同时保持它们与圆相切。有什么建议吗?感谢。

我想我明白了

http://jsfiddle.net/tz5KT/219/

查看我对attrTween的使用，它可能会有所帮助

您需要在transition函数中添加过渡到线点，如下所示:http://jsfiddle.net/tz5KT/177/这里稍微延迟了一下

这就是你想要的过渡函数:

function transition() {
circleX = getRandom(0, width),
circleY = getRandom(0, height);
svg.select(".circle").transition()
    .duration(1500)
    .attr("cx", circleX)
    .attr("cy", circleY)
    .each("end", transition);
    svg.selectAll(".lines")
    .transition()
    .duration(1500)
    .attr("x2", function (d) {
    var tangent = findTangent(d.x, d.y);
    return tangent.x;
})
    .attr("y2", function (d) {
    var tangent = findTangent(d.x, d.y);
    return tangent.y;
});
}
相关文章：