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

贾斯法尔

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

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

科里·法威尔(Corey Farwell)

我想我明白了

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在 R 编程语言中实现这种过滤?

来自分类Dev

如何在D3中取消预定的过渡?

来自分类Dev

如何在iOS中实现进度条的这种效果

来自分类Dev

如何在网页/ javascript中实现这种效果?

来自分类Dev

在d3中创建新频段时,如何实现平滑过渡?

来自分类Dev

如何在D3js强制有向图中为节点实现突出显示和过渡效果?

来自分类Dev

如何在D3中的多个单独的过渡多边形之间添加过渡延迟?

来自分类Dev

在d3中更新值时如何在饼图中进行平滑过渡?

来自分类Dev

如何在 d3 v4 中制作可点击的过渡条形图?

来自分类Dev

如何在ASP.NET Web应用程序中实现这种加载效果

来自分类Dev

如何在ASP.NET Web应用程序中实现这种加载效果

来自分类Dev

如何在r2d3中使用d3为轴过渡设置动画?

来自分类Dev

如何在r2d3中使用d3为轴过渡设置动画?

来自分类Dev

如何实现这种悬停效果?

来自分类Dev

如何实现这种悬停效果?

来自分类Dev

如何实现这种CSS效果

来自分类Dev

如何在页面底部实现这种“剥离”效果?

来自分类Dev

在D3中获取过渡值

来自分类Dev

D3中的中断出口过渡

来自分类Dev

在D3中过渡文字

来自分类Dev

如何实现D3图表的放大正方形效果?

来自分类Dev

如何实现D3图表的放大正方形效果?

来自分类Dev

如何在d3力布局中实现两个方向的平行边?

来自分类Dev

如何在导航菜单W3中添加过渡效果onclick

来自分类Dev

如何在Android中实现这种布局?

来自分类Dev

如何在MySQL中实现这种搜索?

来自分类Dev

如何在C ++中实现这种模式?

来自分类Dev

如何在 Eloquent 中实现这种关系?

来自分类Dev

如何在SVG中实现闪烁效果?

Related 相关文章

热门标签

归档