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）。也就是说，任何可以移到烧瓶外面的圆圈都会保留在它们的位置。

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

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

2 个答案: