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

我一直在尝试这个例子：

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

我想让球四处移动，但要留在烧瓶里。我开始认为，对于一个没有真正svg经验的jQuery开发人员来说，这不是一项容易的任务。这是真的吗

---

谢谢你的指点

即使没有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");
      });
});

强制开启（“勾选”），功能（e）{
var q=d3.几何四叉树（节点），
i=0，
n=节点长度；
而（++i

处理程序的第一部分不变，但在第二部分中，仅更新仍包含在烧瓶内的那些圆的坐标（使用

isContained

）。也就是说，任何移动到烧瓶外的圆圈都保持在原来的位置

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

编辑：

我已经做了这个例子：

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

---

我希望这会有所帮助。

很好的示例，非常好的示例-很遗憾代码中缺少一些注释需要解释。是否有v4的示例？提前谢谢我不知道。但变化应该很小。不管怎么说，这个例子很糟糕。。。