📈 js 그래픽 검색 결과

해당 글 15건

svg element : 기본 모양들

developer.mozilla.org/ko/docs/Web/SVG/Element SVG element reference - SVG | MDN developer.mozilla.org 기본 모양들 아래 외에 storke 등의 스타일링을 추가해줄 수 있습니다. 그래프에서 scatter chart 그릴 때 종종 사용합니다. 막대 그래프 그릴 때 사용합니다. x, y는 절대적인 위치를 의미하고, width, height는 속성명 그대로입니다. rx : The horizontal corner radius of the rect. Defaults to ry if it is specified. ry : The vertical corner radius of the rect. Defaults to rx if it is s..
📈 js 그래픽/svg 1.1 2021. 1. 17. 11:15

svg 태그 소개

이거 공부하는 사람 누가 있냐, figma 써서 쉽게 도형 쫙쫙 그리고 svg로 export하지 라고 생각했고, 아이콘을 사용하는 경우(대부분) 저 말은 맞습니다. 그런데 D3 쓰다 보니 결국 svg로 그래프를 그리는게 기본이라 저도 배우게 되네요. 그래프 잘 그리려면 svg를 어느 정도는 쓸 줄 알아야 합니다. svg ... svg tag attribute 1. width, height 가로, 세로 크기 지정. 2. viewBox viewBox : https://developer.mozilla.org/ko/docs/Web/SVG/Attribute/viewBox viewBox = ", , , " , 는 svg요소 내에서 viewBox의 좌표를 정의하고 , 는 svg요소가 가지는 영역에 맞춰 svg의 요소..
📈 js 그래픽/svg 1.1 2021. 1. 17. 09:05

React + D3.js (1) D3 소개와 React와 접목

모든 Docs는 github wiki에 정리되어 있다. 웹 상에서의 시각화는 D3가 거의 표준처럼 여겨져서 이번 프로젝트에 사용하기 위해 배워본다. D3는 '저수준 라이브러리'다. 그래서 chart.js 처럼 뚝딱 차트를 만들어주는 것과 같은 일을 하지 않는다. 차트 외에 svg, canvas를 다루기 위해 d3.js를 사용할 때도 많습니다. 예를 들어 svg 수작업으로 로고를 넣을 때, 로딩 인디케이터를 css가 아니라 svg로 그릴 때 등 d3.js를 사용한 사례도 많습니다. github.com/d3/d3/wiki d3/d3 Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: - d3/d3 g..
📈 js 그래픽/react + d3.js 2021. 1. 17. 06:19

Canvas 이미지 사용하기

context의 drawImage를 이용하여 캔버스 위에 이미지를 입힐 수 있습니다. (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); s는 source의 약자입니다. 이미지 내부 크기, 위치를 의미합니다. d는 destination이라네요. const canvas = document.querySelector("...
📈 js 그래픽/🎨 Canvas 2020. 7. 18. 20:39

HTML5 Canvas 생성 및 그리기

캔버스 튜토리얼 이 튜토리얼은 canvas 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합�� developer.mozilla.org canvas는 주로 브라우저에서 2D 그래픽에 중점을 두고 있다. 3D 지원을 위한 webGL도 근본은 canvas이다. canvas를 사용하면 조금 더 인터렉티브하고 화려한 웹을 구현할 수 있다. 사용도 그냥 canvas 태그를 쓰면 된다. 맨 처음 생성하면 투명하게 보이니 백그라운드 컬러를 주고 시작하자. - modernizr 체크 (이 브라우저는 캔버스를 지원하는가?) https://modernizr.com/ 특정 기능을 브라우저에서 지원하는 지 체..
📈 js 그래픽/🎨 Canvas 2020. 7. 18. 01:40