반응형 Development/D3js6 Interactive General Update Pattern Interactive General Update Pattern d3.js를 사용하면서 data에 의해 interactive하게 움직이는 모습을 보려면Enter, Exit, Update 패턴이 중요하다. 코드 중 계속해서 호출되며 반복적으로 그리는 함수 내에.data()로 묶여 있는 enter와 update가 있을 경우 enter는 처음 나타난 데이터 셋에 대해서update는 기존의 데이터와 동일한 데이터 셋에 대해서exit는 기존의 데이터에서 사라진 데이터 셋에 대해서각각 transition을 넣을 수 있도록 패턴화 했다. 아래와 같은 패턴을 이용하면 적재적소에 transition을 넣을 수 있는 가독성이 확실히 좋아진다. function plot(data){var update = svg.selectAl.. 2017. 9. 4. D3.js에서 svg 사용하기 SVG(Scalable Vector Graphics): 2차원 벡터 그래픽을 표현하기 위한 XML-based image format왜 SVG인가?SVG를 사용하는 것은SVG기반의 전문 그래픽 프로그램에서 나온 산출물을 그대로 활용할 수 있다검색화, 목록화, 스크립트화가 가능하고, 필요하면 압축도 가능하다확대/축소시 퍼짐 현상이 없고 품질의 손상이 없다D3에서 SVG를 사용하는 것은브라우저에 상관없이 일관적이다 (div 등의 html 엘리먼트로 차트 또는 그래프를 그릴 경우 투박하고 브라우저에 따라 불일치할 수 있음)믿을만 하다빠르다 Canvas와 SVG의 비교.CanvasSVG비트맵 그래픽을 표현해상도에 의존이벤트 핸들러에 대한 지원 없음텍스트 렌더링 기능 미약canvas 확대 보기 한 경우 XML 형식.. 2017. 4. 24. D3.js 개요 및 핵심 정리 왜 D3인가?Data-Driven Documents 삼디, 디삼, 디쓰리! D3.js BSD License : 소스 공개 의무 없음 BSD License 일반적이지 않은 다양한 Chart, Data Visualization 라이브러리 D3 Gallery Smooth한 Transition과 Interactive 구현 D3 Gallery - Interaction Sites.https://d3js.org/ D3 다운로드 d3.ziphttps://github.com/d3 How to use.index.html또는https://code.jquery.com/jquery-3.2.1.min.js">https://d3js.org/d3.v4.min.js"> D3 핵심#Selections : HTML DOM element를.. 2017. 4. 24. Scatter (svg) 그래프 그리기, Transition Scatter (svg) 그래프 그리기, Transition [다운로드]http://d3js.org/download/ (d3.js)http://jquery.com/ (jquery.js) [index.html]add dataremove data 2017. 4. 20. D3.js 바 그래프 그리기(svg), 데이터 수정 D3.js 바 그래프 그리기(svg), 데이터 수정 svg : Scalable Vector Graphics [다운로드]http://d3js.org/download/ (d3.js)http://jquery.com/ (jquery.js) [index.html]add dataremove datachange data [d3sample.js]// Your beautiful D3 code will go herevar dataset = [ 1, 2, 3, 4, 5 ]; var targetSVG;var w = 300;var h = 300;var barPadding = 2; $(document).ready(function () { targetSVG = d3.select("#svgdemo") .append("svg") .a.. 2017. 4. 12. D3.js 바 그래프 그리기(div), 데이터 수정 D3.js 바 그래프 그리기(div), 데이터 수정 [다운로드] http://d3js.org/download/ (d3.js)http://jquery.com/ (jquery.js) [index.html]add dataremove datachange data [d3sample.js]// Your beautiful D3 code will go herevar dataset = [ 1, 2, 3, 4, 5 ]; var targetDiv; $(document).ready(function () { targetDiv = d3.select("#demo"); //DOM에서 demo div를 찾음 var refresh = function () { var divs = targetDiv.selectAll("div") //DOM.. 2017. 4. 12. 이전 1 다음 반응형
