D3.js를 사용하여 WordPress 사이트에 차트를 추가하는 방법

"데이터 시각화"라는 용어는 실무 및 경력 경로 모두에서 주류가 되었기 때문에 익숙할 것입니다. 이 새로운 분야가 잘 진행되고 있는 데는 이유가 있습니다. 우리가 사용자에 대해 지속적으로 더 많이 배우고 우리 주장을 뒷받침하는 데이터를 보여주는 것이 중요합니다.

데이터가 명확하고 전문적인 방식으로 제시되면 이해하고 해석하기 쉽습니다. 대부분의 경우 사용자는 시각적인 사람이므로 차트보다 데이터를 더 잘 설명할 수 있는 방법은 무엇입니까? 데이터 기반 문서라고도 하는 D3.js는 WordPress 사이트에 차트를 추가하는 좋은 방법입니다.

왜 D3인가?

이 라이브러리는 디자이너가 웹에서 데이터를 표시하는 데 도움이 됩니다. 가능성은 무궁무진하여 매우 인기 있는 도서관입니다. 단순한 것부터 복잡한 것, 그 사이에 있는 것까지, D3는 거의 모든 유형의 차트를 렌더링하도록 사용자 지정할 수 있습니다. 표준 웹 기술과 잘 작동하고 DOM을 조작할 수 있으며 매우 유연하며 차트를 원하는 대로 정확하게 사용자 지정할 수 있습니다.

지금쯤이면 SVG라고 하는 Scalable Vector Graphics를 접했을 가능성이 큽니다. 이것은 D3 라이브러리가 생성하는 형식의 유형입니다. SVG는 크기가 작고 확장 가능하며 해상도에 독립적이기 때문에 훌륭합니다.

분명히 말씀드리자면, 이 솔루션은 기본적으로 미리 만들어진 차트와 함께 제공되지 않습니다. 직접 차트를 작성해야 합니다! D3 갤러리를 살펴보면 영감을 줄 수 있는 많은 훌륭한 예를 볼 수 있습니다.

오픈 소스 솔루션으로 라이선스 및 비용에 대해 걱정할 필요가 없습니다. 오픈 소스이기 때문에 개발이 진행 중입니다. 최신 버전을 유지하려면 Github에서 D3를 포크할 수 있습니다.

간단한 D3 차트 만들기

D3가 얼마나 훌륭한지 알았으니 이제 무언가를 만들어 봅시다. D3의 기본 개념을 다룰 간단한 도넛형 차트를 만들어 보겠습니다.

1단계: 사이트에 스크립트 추가

먼저 WordPress 사이트에 D3 스크립트를 추가해야 합니다. d3 웹사이트에서 다운로드할 수 있거나 최신 버전에 직접 연결할 수 있습니다. 이 튜토리얼에서는 축소 버전을 사용하고 있음을 알 수 있습니다. D3는 원래 크기가 꽤 작지만 축소된 파일은 148KB로 여전히 약간 작습니다.

다음으로 사용자 지정 차트 스크립트가 들어갈 새 JavaScript 파일을 만듭니다. 파일을 쉽게 찾을 수 있도록 인식할 수 있는 이름을 지정합니다.

차트별 JavaScript보다 먼저 D3 스크립트가 호출되는 것이 매우 중요합니다. 사물이 올바른 순서로 호출되지 않으면 차트가 렌더링되지 않습니다. (개인적인 경험으로 알고 있는데, 바로 잡아내지 않으면 고장나지 않은 것들을 고치느라 시간을 많이 허비하게 될 것입니다.)

이 스크립트는 닫는 본문 태그 뒤에 사이트에 추가해야 합니다. 페이지를 검사할 때 다음과 같은지 확인하십시오.

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

파일 구조에 따라 파일 경로가 이와 다를 수 있습니다.

2단계: 차트를 만들기 위한 스크립트 추가

d3.js 파일은 전혀 건드리지 않고 특정 차트 파일에서만 작동합니다. 이 경우 charts.js 라고 합니다.

항목을 하나씩 분해해 보겠습니다. 먼저 변수를 만들고 함수에 필요한 것을 설정합니다. 이 변수의 이름을 donut 으로 지정하겠습니다.

var donut = (function(one) {
})();

중괄호 안에 크기 정보를 추가합니다.

var width = 400,

height = 400,

radius = 200

다음으로 색상을 정의합니다. 회색 및 파란색 차트는 어떻습니까? 여기에 나열된 첫 번째 색상은 기본 색상이 될 밝은 회색입니다. 두 번째는 데이터를 나타내는 파란색입니다.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

이것을 테스트하려면 약간의 데이터가 필요하므로 다음에 추가하겠습니다. 이 자습서의 경우 데이터가 하드코딩되어 있지만 D3에서 스프레드시트 데이터 및 동적 데이터를 사용할 수도 있습니다.

var piedata = [{

value: 50

}, {

value: 30

}, ]

이제 차트가 렌더링되는 방법을 정의하는 데 도움이 되는 세부 정보를 추가할 수 있습니다.

호는 내부 반경을 정의합니다. 차트의 바깥쪽 반지름을 상상해 보세요. 차트가 상당히 두꺼워야 하므로 100을 빼면 충분합니다.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

이렇게 하면 SVG 컨테이너가 생성되고 #donut 은 실제로 차트를 렌더링하기 위해 페이지에서 타겟팅할 대상입니다. 여기에서 위의 단계에서 색상을 보기 시작합니다.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

완성된 코드

가지고 있는 것을 샘플과 비교하려는 경우를 대비하여 다음은 전체 코드 스니펫입니다.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

차트 보기

실제로 보기 위해 도넛 차트를 "호출"할 수 있도록 새 페이지나 게시물을 만들어야 합니다. 텍스트 편집 모드에 있는지 확인하십시오.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Viewbox 및 종횡비 대 크기 차트

SVG 태그에는 viewBox 및 reservedAspectRatio 라는 추가 항목이 preserveAspectRatio . 이것은 D3에서 생성되지 않았으며 완전히 선택 사항입니다. 다른 선호하는 크기 조정 방법이 있을 수 있지만 이것은 잘 작동하는 경향이 있으며 차트의 응답성에 도움이 됩니다.

특히 이 경우 완벽하게 둥근 모양을 유지하고 싶기 때문에 종횡비를 설정하면 SVG 크기가 그에 맞게 조정됩니다. 여기에서 viewBox 가 작동합니다. viewBox 의 장점은 SVG 내부에서 사용되는 모든 측정 및 좌표가 사용 가능한 공간에 맞게 조정되어야 하는 방법을 정의한다는 것입니다. 측정값으로 400을 사용하는 경우 원형 모양을 유지하는 방법에 대한 간단한 설명이 있습니다.

동일한 400이라는 두 개의 값이 있습니다. 그 이유는 이미지 크기가 적절하게 조정되기 때문입니다. viewBox="0 0 400 400" 으로 그래픽의 좌표계를 만들고 있습니다. 너비 400단위, 높이 400단위입니다. SVG 그래픽의 너비와 높이는 가시 영역을 설정하고 viewBox 를 설정하면 그래픽이 특정 컨테이너(대부분 기본적으로 사용자가 할 수 있는 웹 페이지의 일부인 뷰포트에 맞게 늘어날 수 있음)를 지정할 수 있습니다. 현재 참조).

viewBox 가 정의되어 있어도 여전히 완벽하게 확장되지 않기 때문에 조금 더 있습니다. 그것은 좋은 일이지만 왜곡되지 않을 것입니다. 그러나 방정식에는 더 많은 것이 있습니다. 윙맨인 preserveAspectRatio 를 만나보세요. 이미지의 종횡비를 정의하는 viewBox 가 없으면 효과가 없습니다. 종횡비를 유지하기 위해 눈금이 조정되므로 완벽한 원형 차트를 유지할 수 있습니다. viewBox preserveAspectRatio 차트가 있는 뷰포트 또는 컨테이너의 종횡비와 일치하지 않는 경우를 계획하고 있습니다. 대부분의 경우 기본적으로 이미지는 높이와 너비 모두에 맞을 때까지 크기가 조정되지만 여분의 공간에 중심을 둡니다. 우리는 브라우저가 양쪽 방향으로 뷰포트 내에서 그래픽을 중앙에 오도록 지시하는 preserveAspectRatio="xMidYMid" 를 포함했습니다.

가장 중요한 점은 그래픽이 잘리지 않고 확장 가능하다는 점입니다. 이것을 실제로 이해하는 열쇠는 값을 실험하는 것입니다. 이를 수행하는 좋은 방법은 값이 변경될 때 어떤 일이 발생하고 뷰포트와 어떻게 관련되는지 확인하는 것입니다.

브라우저 지원 및 d3

최신 브라우저를 사용하고 있을 가능성이 있지만 이전 브라우저를 지원해야 하는 경우 언급할 가치가 있습니다. 전반적으로 브라우저 지원은 훌륭하고 문제가 발생하지 않을 수 있지만 D3.js는 IE8과 같은 이전 브라우저에서 제대로 작동하지 않습니다.

간단한 차트를 만드는 것은 D3.js를 시작하고 실행할 수 있는 좋은 방법입니다. 기본 사항을 알고 D3 시작 차트에 익숙해지면 데이터를 디자인하고 더 많은 차트 유형으로 이동할 때 매우 도움이 됩니다. 단순한 것부터 복잡한 것까지 디자인 옵션은 무한합니다.

차트는 어떻게 되었나요? 댓글로 알려주세요!

무엇 향후 계획?

개발자를 위한 가장 권장되는 플러그인 목록을 보려면 이 eBook을 다운로드하십시오! 우리는 이 모든 플러그인이 사용하기 간편하고 사이트에서 성능이 너무 무겁지 않으며 완전히 신뢰할 수 있다는 것을 발견했습니다.

좋아하는 새로운 플러그인을 설치할 준비가 되셨습니까? 아래를 클릭하세요!