D3 노트 10: 파워 가이드

본 고 는 현재 극단 적 인 대학의 을 배 운 후에 정리 한 간단 한 지식 판 으로 단지 지식 정 리 를 위 한 것 이다.후기 에 저 는 공부 가 깊 어 지면 서 이 를 바탕 으로 유지 와 변경 을 할 것 입 니 다.
1. 파워 가이드 그림
먼저 파워 가이드 맵 (Force - Directed Graph) 의 정 의 를 알 아 보 겠 습 니 다.우선 그림 을 그 리 는 알고리즘 입 니 다.2 차원 또는 3 차원 공간 에 노드 를 설정 합 니 다.노드 간 에 선 으로 연결 하 는 것 을 연결선 이 라 고 한다.각 연결선 의 길 이 는 거의 같 고 가능 한 한 교차 하지 않 는 다.노드 와 연결선 은 모두 힘 의 작용 을 가 했다.힘 의 크기 는 노드 와 연결선 의 상대 적 위치 에 따라 계산 된다.힘 의 작용 에 따라 노드 와 연결선 의 운동 궤적 을 계산 하고 그들의 에 너 지 를 계속 낮 추 며 최종 적 으로 에너지 가 매우 낮은 안정 상태 에 이 르 렀 다.
기능 적 으로 파워 가이드 그림 은 노드 간 의 다 대 다 관 계 를 나 타 낼 수 있다.
2. 데이터 와 레이아웃
파워 가이드 그림 의 원생 데 이 터 는 노드 (nodes) 와 연결선 (edges) 의 두 배열 로 구성 된다.nodes 는 노드 의 필요 한 정 보 를 대표 하고 edges 는 노드 간 의 연결 여 부 를 나타 낸다.다음 실례 데 이 터 를 보십시오.

var nodes = [{ name: "  " }, { name: "  " }, { name: "  " }, { name: "  " }];

var edges = [{ source: 0, target: 1 }, { source: 0, target: 2 }, { source: 0, target: 3 }];

주의: * * edges 에는 각 노드 간 의 연결 관계 의 대상 이 포함 되 어 있 습 니 다. *source 는 연결선 의 기원 을 나타 내 고 target 은 연결선 의 끝 을 나타 내 며 그들의 값 은 * nodes 에서 대응 하 는 노드 대상 의 아래 표 시 를 나타 낸다.
그러나 이런 데 이 터 는 그림 을 그 리 는 데 사용 할 수 없다. 왜냐하면 현재 의 데 이 터 는 노드 와 연 결 된 좌표 가 없 기 때문에 우 리 는 위 치 를 정할 수 있다.그래서 우 리 는 자 연 스 럽 게 레이아웃 함수 가 생각 났 다.제 작 력 가이드 맵 의 레이아웃 함 수 는: d3.layout.force() 입 니 다.힘 가이드 그림 에 대해 우 리 는 보통 이렇게 배치 합 니 다.

var force = d3.layout.force()       //            
    .nodes(nodes)           //       
    .links(edges)           //       
    .size([ width, height ])   //        
    .linkDistance(150)      //       
    .charge([-400]);        //         

ok, 이제 nodes 와 edges 가 각각 어떻게 변 했 는 지 살 펴 보 자.
이것 은 nodes 레이아웃 후의 변화 입 니 다. edges 레이아웃 후의 변 화 를 다시 보 겠 습 니 다.
자세히 보면 레이아웃 후의 노드 대상 과 연결선 대상 이 각 대상 에 다음 과 같은 속성 을 추가 한 것 을 발견 할 수 있 습 니 다.

index: 노드 의 색인 번호

px, py: 노드 이전 시간의 좌표

x, y: 노드 의 현재 좌표

weight: 노드 의 가중치

3. 파워 가이드 그림 그리 기
레이아웃 후의 nodes 와 edges 데이터 가 있 으 면 파워 가이드 그림 을 그 릴 수 있 습 니 다.그 리 는 힘 가이드 그림 은 각각 세 가지 도형 요 소 를 그 려 야 한다.

line, 선분, 연결선 을 나타 낸다.

circle, 원 은 노드 를 나타 낸다.

text, 문자, 노드 설명.

다음은 예제 코드 입 니 다.

//     
var svg_edges = svg.selectAll('line').data(edges).enter().append('line');

var color = d3.scale.category20();

//     
var svg_nodes = svg.selectAll('circle').data(nodes).enter().append('circle')
    .attr('r', 10)          //     10
    .style('fill', function ( d, i ) {        //         
        return color(i);
    })
    .call(force.drag);      //         

var svg_texts = svg.selectAll('text').data(nodes).enter().append('text')
    .attr('dx', 12)     //  text     circle     
    .attr('dy', 8)
    .text(function(d) {
        return d.name;
    });

호출 call( force.drag ) 후 노드 가 끌 릴 수 있 습 니 다.force.drag() 은 하나의 함수 로 이 를 call() 의 매개 변수 로 하여 현재 선택 한 요 소 를 force.drag() 함수 에 전달 하 는 것 과 같다.
4. 노드 드래그 가능
바로 노드 가 드래그 할 수 있 기 때문에 파워 가이드 그림 은 항상 끊임없이 운동 하기 때문에 반드시 노드 와 연결선 의 위 치 를 계속 업데이트 해 야 한다.파워 가이드 맵 레이아웃 force 에 감청 이벤트 tick 가 있 습 니 다.매 순간 진행 할 때마다 감청 함 수 를 호출 한 다 는 뜻 이다.다음은 예제 코드 입 니 다.

force.on("tick", function(){    //         
    //      
    svg_edges.attr("x1",function(d){ return d.source.x; })
        .attr("y1",function(d){ return d.source.y; })
        .attr("x2",function(d){ return d.target.x; })
        .attr("y2",function(d){ return d.target.y; });

    //      
    svg_nodes.attr("cx",function(d){ return d.x; })
        .attr("cy",function(d){ return d.y; });

    //      
    svg_texts.attr("x", function(d){ return d.x; })
       .attr("y", function(d){ return d.y; });
 });

이런 힘 안내 도 는 기본적으로 완 성 된 셈 이다.