Question

我正在尝试将动画属性与D3.js一起使用，当我在html部分使用动画时它可以正常工作

<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>

但是当我尝试在js部分中添加动画属性时，就像这样

d3.select("#box")
  .append("a-animation")
  .attr("attribute","position")
  .attr("to","0 1 -1")
  .attr("dur","1000")
  .attr("begin","click");

它使权利消失，我不知道为什么（顺便说一下，当我从浏览器检查时，它创建了我可以在元素中看到的实体）

有没有办法解决这个问题？是否有任何不同的方法使对象动画与d3.js？

感谢您的帮助。

这是完整的代码

<html>
    <head>
     <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
      <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
  <body>
    <a-scene>
      <a-sky color="#ECECEC"></a-sky>
       <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>
    
    <script type="text/javascript">
      d3.select("#box")
      .append("a-animation")
      .attr("attribute","position")
      .attr("to","0 1 -2")
      .attr("dur","1000")
      .attr("begin","mouseenter");
      </script>
      <a-camera><a-cursor></a-cursor></a-camera>
    </a-scene>
  </body>
</html>

Answer 1

虽然我不是那么熟悉的d3，但我得到了一些意见。

实体消失，因为其rotation属性设置为NaN 0 0。您可以在检查器中看到它。

添加空<a-animation>时，正在更改属性。如果您通过d3.append("a-animation");或通过html手动执行此操作无关紧要。

使用d3.append("a-animation").attr(...)时创建空动画实体，然后添加属性。我不知道为什么通过attr(...)添加属性无法解决“轮换”问题。问题。

所以我提出了两个想法：

以棘手的方式使用<a-animation>实体：
- 创建一个动画实体，并将其从其父
var anim = d3.select("body").append("a-animation") .remove() .attr("attribute", "position") .attr("to", "0 1 -5") .attr("dur", "1000") .attr("begin","click"); 我只是将它附加到身体上，这是有缺陷的（我应该在场景中使用一个框架实体），但我认为它不会造成任何损害。
- 使用d3节点上的appendChild将其附加到目标对象： d3.select("#box").node().appendChild(anim.node());

为什么这样？因为d3 .append(...)似乎需要一个html标记，而不是一个html对象引用。

在这里工作小提琴：https://jsfiddle.net/gftruj/soetzojt/1/。

使用animation component：它似乎在某种程度上起作用，你会打算这样做，因为它是一个组件，而不是一个实体。没有奇怪的错误。不需要追加，只需使用attr()：
d3.select("#box").attr("animation", { "property": "position", "dir": "alternate", "dur": "1000", "from": "0 1 -2", "to": "0 1 -5", "startEvents": "click" });

这似乎更整洁。现场小提琴：https://jsfiddle.net/gftruj/y0e7vfv3/2/。

Answer 2

你可以使用D3的原生过渡，虽然有一些恼人的怪癖让他们使用A-Frame。彼得特的第二个例子看起来更容易IMO。

对于它的价值，这里是来自this CodePen demo的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});
     });
}

Answer 3

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

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

3 个答案: