d3.js를 사용하여 force-layout에서 노드 추가 및 제거 문제

Question

Zabbix API에서 데이터를 가져 와서 서버 가용성 (그리고 나중에는 다른 기능)을 시각화하려고합니다. Zabbix API 문서에서 반환 된 데이터가 [여기] [1]처럼 보이는 예를 볼 수 있습니다.

데이터를 가져 오는 것은 문제가 아니지만 d3.js의 데이터 결합에 문제가 있습니다. 또는 어떻게 생각합니까?

데이터를 가져온 후 사전 순으로 정렬 된 서버 배열을 얻었으며 새로운 서버를 표시하고 제거 된 서버를 사라지게하고 가용성에 변화가 생기면 (또는 미래에는 다른 방식으로) 색상에 반영되도록합니다. 또는 내가 생각할지도 모르는 다른 무엇이든지.

요점은 그래프를 다시 초기화하면 안되며 노드를 추가하거나 제거하여 업데이트해야한다는 것입니다.

문제가있는 비트는 어느 것입니까? 나는 목록에 점점 더 많은 노드를 추가 할 수 있었지만 (결코 삭제하지 않음), 새로운 데이터를 가져올 때마다 다시 그리도록했습니다. 즉, 모든 노드가 다시 추가되고 중앙에 스냅 인 것처럼 다시 그릴 수있었습니다. 먼저 페이지를로드하십시오.

그리고 세 번째 노드는 왼쪽 상단 모서리에 모든 노드가 걸렸습니다.

후자는 내 코드의 현재 상태입니다.

나는이 시점에서 내가 뭘 잘못하고 있는지 약간 확신 할 수 없다. 나는 어쨌든 (지금은) 링크없이, 내가 필요한 것에 상당히 가깝게 보이는 this을보고 있었다. 잘 작동하고 코드에서 해당 동작을 복제하려고 시도했지만 작동하지 않습니다.

누군가 나를위한 조언이 있다면 정말 고맙겠습니다. 나는 훨씬 더 많은 것을 얻지 않고 지난 주 동안 직장에서 이것을 놀았다. :)

고마워!

직장에서 Zabbix에 대한 액세스 권한이 있기 때문에 오늘은 CAB 시간이 16-21 시간에 불과하므로 실제로는 4 시간 정도 더 테스트 할 수 있습니다. 누구든지 밤에 제안 사항이 있으면 내일 사용해 보겠습니다 : D

GitHub의 코드는이 사이트의 명성이 부족하여 저의 우울한 상황에 처해 있습니다. 내 게시물에 2 개의 링크 만 추가 할 수 있습니다.

왜 글로벌하지 않습니까? 본인은 SE 사이트에 10 개 이상의 담당자를 ..을

편집 :

여전히 그들은처럼, 때마다 데이터가 원이 "입력"새로 고쳐집니다 문제가 때 첫 번째로드이 : http://mbostock.github.com/d3/talk/20111018/collision.html 지금 무엇을 해야할지 모르겠다./

Answer 1

D3의 기본 동작은 무엇입니까? 노드를 추가하면 왼쪽 상단 모서리에 삽입됩니다. 자신의 배치 방법을 작성하고 강제 방향 그래프에 추가 할 때 각 노드의 X와 Y를 직접 설정하여이 동작을 변경할 수 있습니다.20)와 결합 된 예 (http://bl.ocks.org/1129492)

지시 힘에서 트릭을 사용 -

1) 뷰포트의 한계 (말을 계산하여 도면 영역의 한계 :

비결은이 알고리즘을 적용하는 것입니다

2) 각 시각화 틱이 작업을 수행 :

3 뷰포트

에 노드를 유지하는 힘을 계산) 알고리즘을 뷰포트에서 노드를 유지하기 위해이 라인을 따라 뭔가 될 것 다음에 따라 각 노드 계산의 X에 대한 및 Y 4 방향 (상단 l 왼쪽 아래, 오른쪽 위, 오른쪽 아래) - 왼쪽 상단에 가깝다면 그에 따라 X와 Y를 설정합니다 .... 어쨌든 화면 밖이 아닐 것입니다 ....

또 다른 트릭이 될 것입니다. 중앙에 루트 노드를 설정하십시오 (이 게시물 : How do I set the focal node in a D3.js Force Directed Graph? 참조). 그러면 그래프가 안정됩니다. 또 다른 조언은 아약스 호출을 다시 그리기와 함께 사용하지 않는 것입니다. 데이터가로드 될 때 콜백과 통화 다시 그리기를 사용하는 것이 이상적입니다. 그렇지 않으면 스파게티 코드로 끝납니다 (강제로 전송되는 그래프가 1000 줄보다 큰 경우는 드문 일이 아닙니다).

희망이 있습니다.