D3를 이해합시다

예제 1: D3를 사용하여 사각형 만들기
먼저 html 코드로 컨테이너를 정의합니다.

<div id="chart"></div>

이제 차트로 ID가 있는 컨테이너가 있습니다.
이 컨테이너를 선택하고 d3를 사용하여 이 DOM 요소를 조작하려고 합니다.

DOM 선택

d3.select(selectorName)

제공된 이름을 가진 첫 번째 요소를 선택합니다.

d3.selectAll(selectorName)

제공된 이름을 가진 모든 요소를 ​​선택합니다.
따라서 예제에서는 차트 컨테이너를 선택합니다.

d3.select("#chart")

DOM 조작

DOM을 선택한 후 수정해야 합니다.
주어진 예제에서 우리는 "추가"방법을 사용하여 선택된 요소 안에 요소를 추가하고 있습니다.

append("svg")

속성 값을 가져오고 설정하려면 "attr"메서드에서 지정해야 합니다.

.attr("width", 600).attr("height", 600)

svg 요소의 너비와 높이를 각각 600과 600으로 설정합니다.

다른 여러 DOM 조작 방법도 있습니다.

차트 컨테이너를 선택하고 svg를 추가한 후 svg에 "rect"를 추가합니다. "rect"는 d3에 미리 정의되어 있으며 유사한 종류의 모양도 사용할 수 있습니다. 여기서 모양을 생성하려면 속성 값을 지정해야 합니다.

.append('rect')

사각형 요소를 추가합니다.

.attr('x', 100)
.attr('y', 120)

DOM 요소에서 위치 지정을 위해 모양의 좌표를 가져오고 설정합니다.

.attr('width', 100)
.attr('height', 60)

생성된 사각형의 너비와 높이를 가져오고 설정합니다.

.attr('fill', 'pink')

직사각형에 색상을 채울 것입니다.

차트 컨테이너에 사각형을 만드는 전체 코드는 다음과 같습니다.

d3.select("#chart").append("svg").attr("width", 600).attr("height", 600)
.append('rect')
  .attr('x', 100)
  .attr('y', 120)
  .attr('width', 100)
  .attr('height', 60)
  .attr('fill', 'pink');

결과:



이제 실제 그래프 예제로 이동해 보겠습니다.

예제 2: 주어진 데이터를 사용하여 원형 차트 생성

data = [
{name: "A", score: 18},
{name: "B", score: 16},
{name: "C", score: 14},
{name: "D", score: 22},
{name: "E", score: 5},
{name: "F", score: 14}
];

먼저 html 코드로 컨테이너를 정의합니다.

<div id="chart"></div>

이제 DOM을 선택하고 svg를 추가합니다.

var svg = d3.select("#chart")
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);

이제 "g"요소를 svg에 추가하고 g 요소는 svg 모양을 그룹화하는 데 사용됩니다.

var g = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');

transform 속성은 요소를 변환하는 데 도움이 됩니다. 여기에서 변환 기능을 사용하여 모양을 주어진 x 및 y 값으로 이동합니다.
회전, 크기 조정 등과 같은 다른 많은 변환 기능을 사용할 수 있습니다.

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);

d3.arc()는 아크 생성기를 반환합니다. innerRadius 및 outerRadius는 각 호의 내부 및 외부 반경 값을 설정합니다.

var pie = d3.pie()
.value(function(d) { return d.score; })

d3.pie() 함수는 파이 생성기를 반환합니다.

var path = g.selectAll('path')
  .data(pie(data))
  .enter()
  .append("g")  
  .append('path')
  .attr('d', arc)
  .attr('fill', (d) => color(d.data.score))
  .style('opacity', opacity)
  .style('stroke', 'white')

이제 우리는 경로 요소를 사용하는 직사각형 및 선과 같은 단순한 것 이외의 복잡한 그림을 만들어야 할 때 g 요소에 경로를 추가합니다. Path는 다른 요소에서 제공하는 다른 속성 외에 모양과 위치를 정의하는 d 속성을 제공합니다.

원형 차트를 만드는 전체 코드:

var data = [
  {name: "A", score: 18},
  {name: "B", score: 16},
  {name: "C", score: 14},
  {name: "D", score: 22},
  {name: "E", score: 5},
  {name: "F", score: 14}
];

var width = 400;
var height = 400;
var opacity = .8;

var radius = 95
var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("#chart")
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);

var g = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);

var pie = d3.pie()
.value(function(d) { return d.score; })

var path = g.selectAll('path')
  .data(pie(data))
  .enter()
  .append("g")  
  .append('path')
  .attr('d', arc)
  .attr('fill', (d) => color(d.data.score))
  .style('opacity', opacity)
  .style('stroke', 'white')

결과:



다음 블로그에서는 몇 가지 고급 차트에 대해 설명합니다.
계속 지켜봐!!!!!