목차
반응형
1. 개요
- 이전 페이지에서는 elements를 만들고, 여러개를 동시에 수정하는 방법에 대해 학습했다.
- 이번 시간에는 픽셀값을 스케일링하는 법에 대해 학습하겠다.
2. Linear Scaling
- 설명
- 값을 선형 변환 해주는 함수
- d3.scaleLinear() 함수를 이용
- .domain() 함수: 원래 값에 대한 범위
- .range() 함수 : 결과 값에 대한 범위
- 예시
let width = 400;
let data = [{x:10,y:15},{x:20,y:10},{x:25,y:20},{x:35,y:30}]
let xScale = d3.scaleLinear()
.domain([0, d3.max(data,d=>d.x)])
.range([0, 400])
let yScale = d3.scaleLinear()
.domain([0,d3.max(data,d=>d.y)])
.range([height,0])
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx",d => xScale(d.x))
.attr("cy",d => yScale(d.y))
.attr("r",2.5)
3. 그외 scaling
- scalePow
- scaleLog
- scaleTime
4. Margin
- 설명
- svg의 가운데 부분에 콘텐츠를 작성해야함
- 여백이 없으면 svg의 공간을 모두 차지하게 됨
- width, height 속성을 추가하여 margin값을 정해줘야함
let width = 400, height = 400;
let margin = {top:10, right:10, bottom:40, left:40};
svg.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
5. 축
- 축을 그리는 방법이 조금 복잡하다.
- 먼저 선을 그리고, margin 크기에 따라 옮겨줘야 한다.
let gXAxis = svg.append("g");
gXAxis.attr("transform",`translate(${margin.left}, ${margin.top+height})`)
.call(d3.axisBottom(xScale));
let gYAxis = svg.append("g");
gYAxis.attr("transform",`translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(yScale));
6. 색
- 설정에 맞게 색을 변경해줄 수 있다.
- d3.scaleOrdinal() 함수의 range에 d3.schemeCategory10 을 넣어서 사용함
- scaleOrdinal의 return 값을 circle의 속성값에 넣어줌
7. Legend
- D3-legend 라이브러리를 사용하면 간단하게 만들 수 있음
반응형
'데이터 시각화 > D3' 카테고리의 다른 글
[D3] D3 append함수, Update Pattern (2) (0) | 2021.05.14 |
---|---|
[D3] Selection 사용법 (1) (1) | 2021.05.14 |