노드 크기에 의한 D3 강제 레이아웃

Question

D3을 사용하여 노드를 특정 속성으로 다르게 크기를 조정하고 더 큰 노드가 가운데로 가고 작은 노드가 외부로 이동하도록 시각화를 만들려고합니다. 크기 조정과 클러스터링 및 충돌 감지가 작동하지만 더 큰 노드에 센터로 이동하는 방법을 알 수 없습니다.

나는 요금을 망쳐 봤지만 작동하도록 설득 할 수 없었다. 나는 더 큰 것들을 중심으로 옮기기 위해 linkDistance를 얻었지만, (a) 거기에 도착하는 것은 매우 번거롭고 (b) 더 작은 것들은 단단히 포장 된 것보다 바깥에있는 길이다. linkDistance는 여전히 코드에 있으며 주석 처리되었습니다.

이 http://pokedex.mrh.is/stats/index.html에이야 :

관련 코드 (I 가정)도 다음과 같습니다. 노드는 attr 속성에 따라 크기가 조정됩니다. 아, 그리고 노드는 포켓몬입니다.

force = d3.layout.force() 
// .gravity(0.05) 
// .charge(function(d, i) { return d.attr; }) 
// .linkDistance(function(d) { 
// return 50000/Math.pow(d.source.attr+d.target.attr,1); 
// }) 
.nodes(pokemon) 
// .links(links) 
.size([$(window).width(), $(window).height()]); 

Answer 1

다음은 나에게 덜 지저분한 버전을 준 것입니다.

force = d3.layout.force() 
    .gravity(0.1) 
    .charge(function(d, i) { return -d[selectedAttr]}) 
    .friction(0.9) 
    .nodes(pokemon) 
    .size([$(window).width(), $(window).height()]); 

실제 질문에 답하려면 각 노드의 좌표가 현재 그래프에 임의로 배치되어 있습니다. 나는 D3 documentation에서 인용 : 노드가 X가없는, y는 이미 설정 속성 있다면, 이러한 특성은 X, 범위 [0 균일 한 랜덤 분포를 사용하여 초기화, 힘 레이아웃에 추가

] 및 [0, y]로 나타낼 수있다.

내 경험에 비추어 볼 때,지도의 중심에 원하는 노드를 가져 오는 마술 force 방법이 없습니다. 과거에 원하는 결과를 얻은 방법은 각 노드의 무작위로 지정된 좌표를 원하는 순서로 노드를 배치하는 좌표로 바꾸고지도의 중심에서부터 확장하는 것입니다.