如何在預定義的容器中包含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

即使沒有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）將燒瓶內的那些圈的座標被更新。也就是說，任何將被移出燒瓶外的圓都保留在原處。

對於將不包含任何時間越長圓，由力佈局中設置的位置復位到前一個（其中圓圈示出）。

Answer 2

編輯：

我做了這個例子：

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

需要與碰撞的一些改進，並且形狀必須由線（不貝塞爾線，使得更容易的計算反射）。

我希望這是幫助。