Skip to main content

data

배열#

데이터는 배열이다.

데이터는 숫자가 될 수 있다. 멋지게 보이고 싶다면 숫자 배열을 일변량 데이터세트(univariate dataset)라고 불러라.

const data = [1, 1, 2, 3, 5, 8];

데이터는 객체가 될 수도 있다. 멋지게 보일려면 다변량 데이터세트(multivariate dataset)라 불러라.

const data = [
{ x: 10.0, y: 9.14 },
{ x: 8.0, y: 8.14 },
{ x: 13.0, y: 8.74 },
{ x: 9.0, y: 8.77 },
{ x: 11.0, y: 9.26 },
];

데이터 👉 요소#

아직 circle 요소가 존재하지는 않지만 선택된 <circle>이 데이터에 대응되기를 기대하면서 아래 코드를 보자.

svg
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', x)
.attr('cy', y)
.attr('r', 2.5);

data 훑어보기#

data 메서드는 데이터를 선택된 요소에 반영한다.

const svg = select('svg');
const circle = svg.selectAll('circle').data(data);

enter메서드는 join 된 데이터에 대해 누락된 요소를 생성한다.

const circle = svg.selectAll('circle').data(data);
circle.enter().append('circle');

새로운 요소들은 데이터에 연결되고 속성들을 계산할 수 있다. 아래 코드에서 속성의 화살표 함수는 각 데이터 항목을 전달 받는 함수로 아래와 같이 구현하는 것은 좌표를 반영하지 않는다.

const circle = svg.selectAll('circle').data(data);
circle
.enter()
.append('circle')
.attr('cx', (d) => d.x)
.attr('cy', (d) => d.y)
.attr('r', 2.5);

다른 예로 데이터에 대한 샘플을 대신해 본다.

const matrix = [
[11975, 5871, 8916, 2868],
[1951, 10048, 2060, 6171],
[8010, 16145, 8090, 8045],
[1013, 990, 940, 6907],
];
d3.select('body')
.append('table')
.selectAll('tr')
.data(matrix)
.join('tr')
.selectAll('td')
.data((d) => d)
.join('td')
.text((d) => d);

Enter, Update and Exit#

다음 시간: 데이터 join 에 대해 좀더 자세히 알고싶다.

join의 이해 https://bost.ocks.org/mike/join/