Question

我对d3非常陌生，并且想知道如何实现this effect，其中多条线始终与圆周相切。

这就是我迄今为止所做的：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);
}

我只是不确定如何将线从一个位置转换到下一个位置，同时保持它们与圆相切。关于如何做到这一点的任何建议？非常感谢。

Answer 1

我想我明白了

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

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

Answer 2

您需要将转换添加到transition函数中的线点，如下所示：http://jsfiddle.net/tz5KT/177/ 这里有点延迟了

Answer 3

这是您在转换功能中所需要的：

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

}

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

3 个答案: