Question

如何在动画之后访问和存储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。

如何在动画后获取此信息并将其保留以供参考？

Answer 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');
})

（对你所拥有的以及你正在努力实现的目标不够熟悉，可能有更合适的方法来实现这一目标，而不是依赖于阅读父母的属性，我觉得这有点贵。

在动画后获取d3.js中的画布位置（cx / cy）以供将来参考？

1 个答案: