为什么 D3.js 过渡函数在我第二次尝试使用它时会损坏？

Question

我正在尝试淡入淡出并将 html div 移动到 svg 圆形元素，同时相同的 svg 圆形元素淡入以查看。为什么我会遇到以下问题？

我遇到的问题是：

svg 圆形元素不淡入
当我第二次尝试为 div 元素使用过渡时，它不起作用
甚至，通过 d3.select(textbox).transition() 取消转换也不起作用

我当前的设置是：

Chrome 版本 51.0.2704.36 beta-m（64 位）
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"
src="https://d3js.org/d3.v3.min.js"

我的代码是：

c=d3.select(document.body).append("svg")
.append("circle")

c
.attr("r","20")
.attr("cx","50")
.attr("cy","50")
.attr("fill","red")
.attr("stroke","black")
.attr("opacity","0")
.transition()
.duration(200)
.attr("opacity","1");



d3.select(testbox)
.transition()
.style("left",c.attr("cx"))
.style("top",c.attr("cy"))
.style("opacity","0")
.duration(200);

Answer 1

将 div 的 position 属性设置为 absolute。

这是工作代码片段。

var c = d3.select(document.body).append("svg")
  .append("circle")

c.attr("r", "20")
  .attr("cx", "50")
  .attr("cy", "50")
  .attr("fill", "red")
  .attr("stroke", "black")
  .attr("opacity", "0")
  .transition()
  .duration(1000)
  .attr("opacity", "1");

var testbox = d3.select("#testbox");

d3.select(testbox.node())
  .style("position", "absolute")
  .transition()
  .style("left", c.attr("cx") + "px")
  .style("top", c.attr("cy") + "px")
  .style("opacity", "0")
  .duration(1000);

div {
  background: green;
  width: 55px;
  height: 20px;
  left: 0px;
  top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <div id="testbox"></div>
</body>

为什么 D3.js 过渡函数在我第二次尝试使用它时会损坏？

Why does D3.js transition function gets broken when I try to use it second time?

animation

transition

google-chrome

d3.js