SVG3 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. 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. 이전 1 다음 반응형
