Javascript D3.js使用A帧的动画功能使实体消失

我试图在D3.js中使用animation属性，当我在html部分中使用a-animation时，它可以正常工作

<a-box id="box" position="0 1 0" rotation="0 0 0" scale="1 1 1" color="#4CC3D9">
         <a-animation attribute = "position" to="0 1 -2" dur="1000" begin="mouseenter">
      </a-animation>
</a-box>

它使实体消失，我不知道为什么它会创建实体，我可以在元素中看到，当我从浏览器检查

有没有办法解决这个问题？ 使用d3.js制作对象动画有什么不同的方法吗

谢谢你的帮助

这是完整的代码

d3.选择框 .appenda动画 .属性、位置 .attrto，0 1-2 attrdur先生，1000 .阿特贝京，穆塞纳；

---

我有一些想法，虽然我对d3不太熟悉

实体将消失，因为其旋转属性设置为NaN 0。 你可以在检查员那里看到

当您添加空属性时，该属性正在更改

使用： 它似乎在某种程度上起作用，你可能会这么想，因为它是一个组件，而不是一个实体。不会引起奇怪的虫子。不需要追加，只需使用attr： d3.selectbox.attranimation{ 财产:职位,， 董事：候补董事， dur:1000， 从:01-2,， 致:01-5,， 开始事件：单击 };

---

这看起来更整洁。这里是LiveFiddle:。

你可以使用D3的本机转换，尽管在使用A-Frame时有一些恼人的怪癖。Piotr的第二个例子看起来更简单

值得一提的是，下面是JavaScript代码，它可能会满足您的需求：

// Attach click event listener
d3.select("#box")
  .on("click", moveBox);

function moveBox () {
  // Select the box
  var box = d3.select(this);
  // Setup a transition
  box.transition()
     .duration(1000)
     // attrTween is needed for smooth transitions (IDK why)
     .attrTween("position", function() {
       // Get current position
       var currentPosition = box.attr("position");  // {"x": 0, "y": 1, "z": 0}
       // Return an interpolater from current to next position
       return d3.interpolate(currentPosition, {"x": 0, "y": 1, "z": -2});
     });
}

---

如果您将javascript移出a-scene容器，原始代码就可以正常工作。

谢谢您的回答，我尝试使用两种解决方案，第二种解决方案适用于同一实体，但我无法用于两种不同的动画，例如，如果我将属性用于位置，我无法将其用于旋转或缩放。你知道如何使用多个动画吗？@Melih动画组件需要有不同的名称、动画位置、动画比例等。请查看我更新的fiddle@Melih，因为我使用了dir:alternate，请删除它，这样它就不会恢复到原始状态。关于更多的选择，请查看文档：谢谢你的帮助我解决了我的问题两个答案。你不必回答我的最后一个问题。祝你有愉快的一天@Melih很高兴我能帮上忙：

// Attach click event listener
d3.select("#box")
  .on("click", moveBox);

function moveBox () {
  // Select the box
  var box = d3.select(this);
  // Setup a transition
  box.transition()
     .duration(1000)
     // attrTween is needed for smooth transitions (IDK why)
     .attrTween("position", function() {
       // Get current position
       var currentPosition = box.attr("position");  // {"x": 0, "y": 1, "z": 0}
       // Return an interpolater from current to next position
       return d3.interpolate(currentPosition, {"x": 0, "y": 1, "z": -2});
     });
}