Visualization 썸네일형 리스트형 D3 :: select(), selectAll()을 이용한 문서요소 만들기 D3는 'Data-Driven Document' 라는 이름에서도 알 수 있듯이 다양한 방법으로 쉽게 Data를 DOM element에 쉽게 바인딩 할 수 있기 때문이다. Data를 바인딩하여 출력물을 내는 간단한 예제를 통해서 D3의 기본적인 구조, selection 객체, select & selectAll 메소드 등을 알아본다. 현재 D3 v4가 release되었지만 v3, v4의 비교를 통한 공부를 하기위해 v3으로 진행한다. 기본개념에 대한 예제123456789101112131415161718192021222324252627 var theData = [1, 2, 3, 4 ,5]; var selection = d3.select("body") .selectAll("p") .data(theData) .e.. 더보기 SVG :: 기본 도형 SVG 에 대한 정리 내용은 대부분 아래의 Spec 과 Tutorial 을 참조하여 작성하였다.https://www.w3.org/TR/SVG : W3C SVG spec http://tutorials.jenkov.com/svg/index.html : SVG tutorial by Jenkov 이번 페이지에서는 SVG의 기본도형에 대해서 정리하였다. 기본 도형에 대한 내용은 element에 대해 이런것이 있구나 라는 것을 알기위한 목적으로 간단히 정리하고 후에 나오는 path 등을 좀더 자세히 다룰 예정이다. 기본도형의 종류 spec 에 정의된 기본도형에 대한 내용이다. 도형의 이름과 그에 대한 element가 나타나있다. 사각형, 원, 타원, 선, 꺾은선, 다각형 이 있다. 각각의 spec은 각 elemen.. 더보기 SVG :: 개념 및 좌표체계 SVG 에 대한 정리 내용은 대부분 아래의 Spec 과 Tutorial 을 참조한다.https://www.w3.org/TR/SVG : W3C SVG Spec http://tutorials.jenkov.com/svg/index.html : SVG Tutorial by Jenkov이번 페이지에서는 SVG 에 대한 기본 개념과 좌표체계 그리고 여러 요소들을 표현하기 위한 기본적인 svg element 에 대해 정리하였다. SVG 개념 Scalable Vector Graphics 의 약어로 Vector 기반이기때문에 해상도에 영향을 받지 않고 확대나 축소를 하여도 이미지가 깨지지 않는다.XML basedJavascript SVG DOM API를 이용하기 때문에 Event handler를 등록하여 Element .. 더보기 이전 1 다음
