javascript - 为 D3 和 SVG 元素创建动画

Question

我正在尝试使用 SVG 和 D3.JS 创建奥林匹克标志(有五个圆圈)， 通过从 JSON 数据中获取圆圈属性，然后我想为圆圈分配一些动画，可能通过动画将第一个圆圈与最后一个圆圈交换。我完成了一半的代码，但我对如何访问圈子和添加一些过渡感到震惊。我的代码在这里。

JSBIN

Answer 1

我通常做的是有一个更新函数，它接收数据并相应地更新节点，我添加的一个附加参数是一个动画标志，用于在更新时执行转换

function update(data, animate) {
   // bind data
   // enter
   // enter + update
   // - if animate = true perform animation
   // exit
}

demo