jQuery Performance
jQuery 성능 향상하기 (performance)jQuery는 라이브러리이기 때문에 순수 자바스크립트보다 당연히 성능이 느릴 수 밖에 없다. 안 그래도 느린데 잘못된 방법으로 코딩을 하면 상황을 더 악화시킬 수 있다. 그래서 흔히들 하는 실수와 그에 대한 대처 방법을 소개 한다. 변수 저장우선 첫 번째로 가장 간단한 건데 많이 놓치고 있는 부분이 있다.
카테고리: Library
jQuery Animated Background Position
jQuery animate() 함수 backgroundPosition 사용배경이미지의 background-position 값 위치를 jQuery로 동적으로 제어하는 방법을 알아보자. jQuery v1.4.3 이상 버전부터는 animate() 함수에서 backgroundPosition 속성을 지원하지 않는다.따라서 속성값을 background-position
D3.js Text
D3.js text APItext() 메소드는 셀러토된 요소에 텍스트를 출력 한다. 예제1 1234567d3.select('body').append('p') .text('Hello World!'); //output<body><p>Hello World!</p> =
D3.js SVG
D3.js SVGSVG는 도형을 그리기 위한 HTML의 태그로 rect, circle, line, path, ellipse, polyline 등을 사용하여 그린다. HTML의 SVG 코드 12345678910111213141516<svg wdth="500" height="500" style="backgrou
D3.js Select
D3.js select APId3.js 에서는 일반적으로 메서드 체이닝 기법을 사용한다. jQuery의 select API 문법과 흡사하지만 d3에서는 selection 객체에 대해서 data()를 통해 특정 데이터를 바인드하고, enter()와 exit()를 통해 데이터에 대응하는 객체를 다룰 수 있는 기능들을 제공한다 select API select(
D3.js ScaleTime
D3.js scaleTime기초적인 축에 더해 이번엔 날짜를 값으로 하는 가로축을 생성해보자.이 경우 domain의 범위는 Date객체가 된다. 12345678910111213141516171819202122232425262728293031<svg id="graph" width="100%" height="1
D3.js Scale 집중탐구
D3.js Scale 집중탐구 - 1기본적으로 scale을 그리는 이미지의 크기와 컬러를 자동으로 조정하느 기능을 담당한다. 읽어온 데이터값을 건들지 않고 그 데이터값에 맞는 크기와 컬러 범위를 시각화 할때 자동으로 맞춰준다. d3.scaleLinear() d3.scalePow() d3.scaleLog() 12345678910111213141516171
D3.js Scale
D3.js Scaled3.js 의 scale은 어떤 범위를 숫자를 다른 범위로 숫자로 변경해서 그릴려고 하는 영역 공간에 그 크기를 자동으로 조절하여 시각화 하는데 사용하는 함수가 바로 scale 메소드 이다. scale API d3.scaleTime() d3.scaleLinear() d3.scalePow() d3.scaleLog() d3.scaleIde
D3.js Functions
D3.js 배열의 유용한 함수d3,js의 배열의 유용한 함수들 이다. 12345678910111213var data = [1, 2, 3, 4, 5];d3.min(data); // 최소값d3.max(data); // 최대값d3.extent(data); // [최소, 최대]d3.extent(data); // 합d3.mean(data); // 산술 평균치d3.m
D3.js Axis API
D3.js axis API차트에서 축은 너무나 자주 사용되므로 축을 생성하는 기능을 d3.js안에 내장 되어있다. 축에서는 눈금을 표현해야하고 적당한 값을 넣어줘야하는 등 복잡한 일이 많다만, 이러한 복잡성을 d3.js가 간단히 처리해준다.2차원의 차트에서 축이 올 수 있는 자리는 상하좌우이므로 다음과 같은 함수가 제공된다. axis API d3.axis