경계 영역에서 중력을 정확하게 시뮬레이션하려면 어떻게해야합니까?

Question

중력처럼 바닥에 끌린 볼을 안에 넣고 용기를 만들려고합니다. 나는 그것을 잘하는 것에 가깝지만 볼은 결국 서로 녹아서 가시성을 유지하지 못합니다.

See the demo here

나는 각 노드의 반경을 고려하지 않기 때문에 문제가 중력 함수 자체에서 오는 생각 :

var gravity = function() { 
    return function(d) { 
     d.y += (d.cy - d.y); 
     d.x += (d.cx - d.x); 
    }; 
} 

또는 시뮬레이션 애니메이션의 경계 함수에서 (체크)

, 위의 동일한 문제에 대해

d3.selectAll("circle.node") 
    .attr("cx", function(d,i){ return Math.max(radius, Math.min(width - radius, d.x)); }) 
    .attr("cy", function(d,i){ return Math.max(radius, Math.min(height - radius, d.y)); }); 

이 경우 각 볼을 어떻게 구분할 수 있습니까?

편집 : 나는 그것을 공유 할 것이다 해결책을 발견 곧

Answer 1

좋아, 나는 마침내 문서를 읽고 문제를 이해했습니다! See the demo here

모든

은 forceSimulation에 올바르게 통합, 각 노드 사이에서 충돌에 대해, 그리고 틱 함수의 바운드 계산 :

... 


    // Change values below to modify the physic 
    var simulation = d3.forceSimulation() 
    .velocityDecay(0.3) 
    .force("y", d3.forceY(height).strength(.035)) // gravity at bottom 
    .force("collide", d3.forceCollide().radius(radius).strength(1.5).iterations(10)) 
    .nodes(nodes) 
    .on('tick', tick); 

    function tick() { 
    // bound 
    node.attr('cx', function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }) 
     .attr('cy', function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); 
    } 

Answer 2

planck.js라는 라이브러리가있다. 나는 그것이 D3와는 아무런 관련이 없다는 것을 알고 있지만, 영감을 얻기 위해 항상 코드를 점검 할 수 있습니다.

행운을 빈다.