selections

선택자 selectors#

#foo        // <any id="foo">
foo         // <foo>
.foo        // <any class="foo">
[foo=bar]   // <any foo="bar">
foo bar     // <foo><bar></foo>

복합 선택자 compound selectors#

foo.bar     // <foo class="bar">
foo#bar     // <foo id="bar">

javascript#

자비스크립트의 선택 지원 메서드

document.querySelectorAll('pre, code');

d3#

d3에서 요소(elements) 선택

d3.selectAll('pre, code');

attr and style 메서드#

선택된 요소의 속성 및 스타일 바꾸기

// 모든 <circle> 요소 선택
const circle = d3.selectAll('circle');

// 속성 및 스타일 변경
circle.attr('cx', 20);
circle.attr('cy', 12);
circle.attr('r', 24);
circle.style('fill', 'red');

메서드 체이닝 method chaining#

메서드 체이닝으로 읽기 쉬운 코드 만들기

// 모든 <circle> 요소 선택후
// 속성 및 스타일 변경
d3.selectAll('circle')
  .attr('cx', 20)
  .attr('cy', 12)
  .attr('r', 24)
  .style('fill', 'red');

selection.append#

선택자의 append 메서드로 요소를 선택하고 선택자에 새 요소 추가하기

// <body> 요소 선택
const body = d3.select('body');

// <h1> 요소 추가
const h1 = body.append('h1');
h1.text('Hello!');

선택된 모든 요소에 대해 새 요소 추가하기

// 모든 <section> 요소 선택
const section = d3.selectAll('section');

// 선택된 각각의 요소에 <h1> 요소 추가
const h1 = section.append('h1');
h1.text('Hello!');

메서드 체인은 새로운 선택자를 돌려준다는 사실 주의!!

const h1 = d3
  .selectAll('section')
  .style('background', 'steelblue')
  .append('h1')
  .text('Hello!');