데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (2)

안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The Chart Generator)입니다.

 

이번 포스팅에서는 저번 포스팅에 이어서 D3.js 라이브러리로 네트워크 차트 만들어 보겠습니다!

 

저번 포스팅 보러가기
[FrontEnd] - 데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (1)

 

---

04. 차트에 zoom 기능 적용하기 

function handleZoom(e) {
    d3.select(selector + " g").attr("transform", e.transform);
}
const zoom = d3.zoom().on("zoom", handleZoom);

d3.selectAll(selector + " svg").call(zoom);

 

 

05. drag 애니메이션 적용하기

var drag = (simulation) => {
    function dragstarted(event, d) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(event, d) {
        d.fx = event.x;
        d.fy = event.y;
    }

    function dragended(event, d) {
        if (!event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

    return d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended);
};

 

06. 시뮬레이션 실행하기

simulation.on("tick", () => {
    link.attr("d", linkArc);
    node.attr("transform", (d) => `translate(${d.x},${d.y})`);
});

 

이전 포스팅에 이어서 위와 같은 코드를 활용해 네트워크 차트를 그릴 수 있습니다.

앞으로도 D3에 관련된 내용을 많이 포스팅할 예정이니 자주 방문해주세요!

 

감사합니다.