D3을 사용하여 대화 형 장치 맵 만들기

-2

그래서 우리는 수많은 고객 장치에서 장치/소프트웨어를 관리하기위한 웹 응용 프로그램을 보유하고 있습니다. 우리는 최근에 이러한 고객 네트워크를 시각적으로 표현하기위한 아이디어를 제안했습니다. 여기에 계층 구조가 어떻게 보이는지의 아이디어입니다 :D3을 사용하여 대화 형 장치 맵 만들기

제안 된 아이디어는 고객이 그것을 확대 할 LOCATION1 클릭 수이 계층 구조의 시각화를 가지고 있고, 자신이 라우팅 장치를 볼 것입니다

customer 
    location1 
     router1 
      10 devices 
     router2 
      15 devices 
    location2 
     router3 
      200 devices 
     router4 
      200 devices 
     router5 
      50 devices

, 그런 다음 화살표를 사용하여 장치 간 코덱 연결 등의 정보를 표시하는 "레이어"를 켤 수 있습니다. 이것은 처음에 자신의 네트워크가 배치되는 방법, 네트워크의 부분 설정, 네트워크 내에서의 라우팅 등을 디버깅하는 데 사용됩니다.

첫 번째 아이디어는 여기에 표시된 것과 비슷한 트리 맵을 만드는 것이 었습니다 : http://bost.ocks.org/mike/treemap. 네트워크 배포를 보여 주며 특정 부분을 확대/축소 할 수 있습니다.

내 질문에 너희들은 내가 길을 걸어서이 일로 넘어갈 것을 제안한다. 트리 맵은 사용하기에 적합한 기반인가, 아니면 더 간단한 것으로 시작해야합니까? 비슷한 레이아웃의 다른 예가 있습니까?

출처

2014-11-11 Andrew Koroluk

여기에 D3의 cluster layout으로 만든 dendrogram과 함께 갈 수도 있습니다. 모든 D3 시각화에는 확대 동작을 적용 할 수 있으므로 like this이므로 실제로 고려하지는 않습니다.

출처

2014-11-11 16:30:41

흥미 롭습니다. 링크를 제공해 주셔서 감사합니다. 클러스터 노드를 드래그 할 수있는 방법을 보여주는 예제가 있습니까? 편집 : 강제 그래프를 사용하지 않습니다. –

당신은 뭔가를 의미합니다 (http://bl.ocks.org/robschmuecker/7880033)? –

나는 드래그 할 때 링크가 사라지지 않는 곳을 찾고 있었지만 큰 문제는 아니 었습니다. 감사. –

D3을 사용하여 대화 형 장치 맵 만들기

답변

관련 문제