Javascript 如何让d3识别push+；shift作为一个添加新对象到末尾，并从开头删除旧对象，而不仅仅是一个数据更改

我正试图使用d3.js来制作一个不断递增的面轮子的动画，其中一次显示3个面，每次出现“勾号”时，顶部面消失，中间面上升一个，并添加一个新的底部面。我希望议案看起来平顺，但事实并非如此

我似乎不知道如何在这里使用转换，看起来d3只是看到了我的大小为3的数组的值在变化。当它真的应该看到添加和删除每次，但我不知道如何做到这一点

我怎样才能解决这个问题

document.addEventListener（'DOMContentLoaded'，函数（事件）{
变量状态={
滴答:0,，
n:0，
轮子：[]，
nfacet:3
};
函数更新\u状态（状态）
{
如果（state.wheel.length>=state.nfacet）
state.wheel.shift（）；
state.wheel.push（++state.n）；
}
对于（变量i=0；istate.tick+ticksize）
{
做某事=真实；
state.tick+=ticksize；
}
如果（做某事）
{
更新_状态（state）；
更新视图（状态）；
}
}, 200);
});

我想问题在于，只要位置依赖于索引，并且索引没有变化（例如0,1,2），那么位置就没有变化，只是基于数据的文本变化

我找到了另一种工作方式（基本上是循环缓冲）：

document.addEventListener（'DOMContentLoaded'，函数（事件）{
变量状态={
滴答:0,，
n:-2，
轮子：[]，
nfacet:5，
轮换：0
};
函数更新\u状态（状态）
{
state.wheel[state.rotate]=++state.n；
state.rotate=（state.rotate+1）%（state.nfacet+2）；
}
对于（变量i=0；istate.tick+ticksize）
{
做某事=真实；
state.tick+=ticksize；
}
如果（做某事）
{
更新_状态（state）；
更新视图（状态）；
}
}, 200);
});

哦，我应该使用关键函数来确保对象的稳定性。看

下面是一个按照我最初设想的思路工作的实现：

document.addEventListener（'DOMContentLoaded'，函数（事件）{
变量状态={
下一个时钟：0，
尺寸：1000，
n:0，
轮子：[]，
nfacet:3，
init：对
};
函数更新\u状态（状态）
{
如果（state.wheel.length>=state.nfacet）
state.wheel.shift（）；
state.wheel.push（++state.n）；
}
对于（变量i=0；i