1

如何在动画之后访问和存储 D3 对象的画布位置 (cx/cy)，以便我可以将其用作下一个动画的起点？

我有以下输入转换：

var enterTransition = enter.transition()
    .duration(duration)
    .delay(function(d, i) { return i * delay; })
    .attr("cx", function(d, i) { return Math.random()*width; })
    .attr("cy", function(d, i) { return Math.random()*height; });

结果我真的不知道我的节点在哪里结束。

一个节点可能有子节点和一个“点击”事件作为结果。如果用户单击节点，我希望新一批节点从父节点开始并从那里随机化。我像这样定义我的节点（“气泡”）......

var bubbles = vis.insert("svg:g")
    .attr("class", "enter")
  .selectAll("g")
    .data(d.children)
  .enter().append("svg:circle")
    .attr("stroke", "black")
    .attr("fill", function(d, i) { return colors(i); })
    .attr("cx", function(d, i) { return d.cx0; })  // for illustration purposes
    .attr("cy", function(d, i) { return d.cy0; })  // for illustration purposes
    .attr("r", function(d, i) { return rScaled(d.duration); })
    .style("cursor", function(d) { return !d.children ? null : "pointer"; })
    .on("click", down);

我的d.cx0和d.cy0代表父节点的cx/cy。

如何在动画后抓取这些信息并保存以供参考？

4

1 回答 1

1

在您具有设置"cx"和的功能中"cy"：

.attr("cx", function(d, i) { 
  // In here, the "this" keyword refers to the svg circle. So:
  var parent = this.parentNode;// That's the parent you're interested in
  return d3.select(parent).attr('cx');
})

（对你所拥有的和你想要达到的目标不够熟悉，很可能有一种更合适的方法来实现这一点，它不依赖于读取父母的属性，我认为这有点贵）。

于 2012-11-12T22:35:13.353 回答