animation - 如何在预定义的容器中包含 D3 动画的元素？

Question

我一直在试验这个例子：

http://mbostock.github.io/d3/talk/20111018/collision.html

这是我第一次看D3。我希望有人能指出我正确的方向。基本上我想做的就是把上面例子中的球放在这个里面：

http://www.clker.com/cliparts/p/8/g/0/D/T/black-empty-flask.svg

我希望球四处移动但留在烧瓶内。我开始认为对于没有真正 svg 经验的 jQuery 开发人员来说这不是一件容易的事。真的吗？

感谢您的任何指点！

Answer 1

编辑：

我做了这个例子：

http://bl.ocks.org/rveciana/6220206

碰撞需要一些改进，并且形状必须由线组成（不是贝塞尔线，以便更容易计算反射）。

我希望这会有所帮助。

Answer 2

即使没有 D3 经验，这也不应该太难实现。困难的部分是您需要检查给定坐标是在烧瓶内部还是外部。假设存在这样的函数，例如isContained，您需要做的唯一更改是tick放置气泡的事件处理函数。

force.on("tick", function(e) {
  var q = d3.geom.quadtree(nodes),
      i = 0,
      n = nodes.length;

  while (++i < n) {
    q.visit(collide(nodes[i]));
  }

  svg.selectAll("circle")
      .filter(function(d) { return isContained(d.x, d.y); })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

   svg.selectAll("circle")
      .filter(function(d) { return !isContained(d.x, d.y); })
      .each(function(d) {
        d.x = d3.select(this).attr("cx");
        d.y = d3.select(this).attr("cy");
      });
});

处理程序的第一部分没有改变，但在第二部分中，仅更新仍将包含在烧瓶中的那些圆圈的坐标（使用isContained）。也就是说，任何将移出烧瓶的圆圈都保留在原处。

对于不再包含的圆圈，力布局设置的位置重置为前一个（绘制圆圈的位置）。