D3.js 기초

태그 수정 1

이전 토픽에서 원하는 태그를 select 함수로 선택했습니다. 선택한 태그에는 여러 값이 있습니다. 태그의 속성값, 적용된 CSS 속성값 등을 예로 들 수 있습니다. 이번 토픽에서 선택한 태그의 각종 값을 확인하고, 수정해보겠습니다.

 


1. 코드 작성

d3TagModify.html 혹은 다른 이름으로 HTML 파일을 하나 만들고 다음과 같이 코드를 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var img = d3.select('img')
console.log(img.attr('src'))
img.attr('src''https://raw.githubusercontent.com/d3/d3-logo/master/d3-black.png')
console.log(img.attr('src'))
 
var style = d3.select('.style')
console.log(style.style('color'))
style.style('color''red')
console.log(style.style('color'))
 
var text = d3.select('.text')
console.log(text.text())
text.text('바뀐 내용')
console.log(text.text())
 
var html = d3.select('.html')
console.log(html.html())
html.html('<h1>바뀐 내용</h1>')
console.log(html.html())
cs

 

HTML 파일을 브라우저에서 열면 다음과 같습니다.

 

d3TagModify.js 혹은 다른 이름으로 자바스크립트 파일을 만듭니다. 다른 이름으로 하셨다면 HTML 코드 중 13번 줄, script 태그의 src 속성을 바꿔주면 됩니다. 다음과 같이 자바스크립트 코드를 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
var img = d3.select('img')
console.log(img.attr('src'))
img.attr('src''https://raw.githubusercontent.com/d3/d3-logo/master/d3-black.png')
console.log(img.attr('src'))
 
var style = d3.select('.style')
style.style('color''red')
 
var text = d3.select('.text')
text.text('바뀐 내용')
 
var html = d3.select('.html')
html.html('<h1>바뀐 내용</h1>')
cs

 

자바스크립트 코드를 작성하고 난 뒤 HTML 파일을 다시 브라우저에서 열면 다음과 같은 화면으로 바뀝니다.

 


2. 속성값 수정

2-1. selection.attr(name[, value])

선택한 태그의 특정 속성값을 알고 싶거나 수정하고 싶을 때 attr 메소드를 사용합니다. 매개변수를 넣는 경우에 따라 attr 메소드가 하는 일이 달라집니다. name 매개변수는 필수로 넣어줘야 합니다.

  1. name에만 값을 넣었을 경우
    선택한 태그의 속성 이름이 name인 속성(간단하게 name 속성이라고 하겠습니다)의 속성값을 반환합니다.
     
  2.  매개변수 name과 value 모두 값을 넣었을 경우
    name 속성의 속성값을 value로 수정합니다. 만약 value 값이 null일 경우 name 속성을 제거합니다.

 

2-2. 예시

위에서 작성한 자바스크립트 코드 중 1~4번 줄이 attr 메소드를 사용한 코드입니다.

1
2
3
4
var img = d3.select('img');
console.log(img.attr('src'));
img.attr('src''https://raw.githubusercontent.com/d3/d3-logo/master/d3-black.png');
console.log(img.attr('src'));
cs

 

브라우저의 개발자도구 콘솔창에는 다음과 같이 뜹니다.

 

2-3. 코드 설명

  • 1번 줄은 select 함수로 태그를 선택하고 selection 객체를 img 변수에 대입합니다. 이렇게 변수에 selection 객체를 대입하면 나중에 다시 함수를 쓰지 않고 selection 객체를 사용할 수 있습니다.
  • 2, 4번 줄은 선택한 태그의 src 속성값을 콘솔창에 출력합니다.
  • 3번 줄은 선택한 태그의 src 속성값을 바꿉니다. 3번 줄에서 선택한 태그의 src 속성값을 바꿨기 때문에 2번 줄과 4번 줄의 콘솔창 출력 값이 다른 것을 볼 수 있습니다.

 


3. CSS 수정

3-1. selection.style(name[, value[, priority]])

선택한 태그의 CSS 속성값을 알고 싶거나 수정하고 싶을 때 style 메소드를 사용합니다. attr 태그와 사용법이 같습니다. 역시 name 매개변수는 필수로 넣어줘야 합니다.

  1. name에만 값을 넣었을 경우
    선택한 태그의 name CSS 속성의 속성값을 반환합니다.
     
  2. name, value 에 값을 넣었을 경우
    name CSS 속성의 속성값을 value로 지정합니다.
     
  3. name, value, priority 모두 값을 넣었을 경우
    priority 매개변수는 CSS 우선순위를 지정하는 !important 옵션을 위한 매개변수로 null, important 두 경우가 있습니다. 매개변수로 문자열 important를 입력하면 해당 CSS 속성은 !important 옵션을 가집니다. 매개변수로 null을 입력하면 해당 CSS 속성의 !important 옵션을 제거합니다.
주의사항
priority 매개변수에 문자열 'important' 대신 느낌표를 추가해서 '!important'를 입력하면 안 됩니다. 느낌표 없이 'important'만 입력해야 정상적으로 작동합니다.

 

3-2. 예시

위에서 작성한 자바스크립트 코드 중 6~9번 줄이 attr 메소드를 사용한 코드입니다.

6
7
8
9
var style = d3.select('.style')
console.log(style.style('color'))
style.style('color''red')
console.log(style.style('color'))
cs

 

브라우저의 개발자도구 콘솔창에는 다음과 같이 뜹니다.

 

3-3. 코드 설명

  • 7, 9번 줄은 선택한 태그의 CSS 속성 중 color 속성값을 콘솔창에 출력합니다.
  • 8번 줄은 선택한 태그의 color CSS 속성값을 red로 바꿉니다. 속성값이 rgb 000(black)에서 red로 바뀐 것을 콘솔창과 브라우저 화면에서 확인할 수 있습니다.

 

* text 메소드와 html 메소드는 다음 토픽에서 다룹니다.

댓글

댓글 본문
  1. 바른생활
    강의 진행하는 것이 쉽지 않은 일이죠~ 나중에 여유가 되실 때 다시 진행 해 주시면 감사하게 보도록 하겠습니다.
    감사합니다.
버전 관리
kolpi12
현재 버전
선택 버전
graphittie 자세히 보기