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


我只是不确定如何将线条从一个位置过渡到另一位置,同时又保持它们与圆切线。有关如何执行此操作的任何建议?非常感激。

最佳答案

我想我明白了

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

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

10-07 23:26