[D3] scaling ,Margin, 색깔설정 (3)

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 라이브러리를 사용하면 간단하게 만들 수 있음