d3.js 기초 다지기 헛둘!

1. scale 함수

scale함수는 함수를 만드는 함수인데 domain() 범위의 입력값이 들어오면 range() 범위의 결과값으로 바꿔주는 함수를 만들어준다.
(일반적으로 domain은 데이터의 최소, 최대값으로 설정하고, range는 표출할 범위의 너비, 높이 픽셀값이 된다.)

그래서 이를 이용해 데이터의 값들을 화면상의 어느 좌표상에 위치해야할지 결정할때 사용할 수 있다.

const scale1 = d3
      .scaleLinear()
      .domain([1, 5])
      .range([1, 10]);
console.log(scale1(3)); // 5.5
console.log(scale1(5)); // 10

const scale2 = d3
      .scaleTime()
      .domain([
        new Date("2020-07-01T01:00:00"),
        new Date("2020-07-01T01:00:05")
      ])
      .range([1, 10]);

console.log(scale2(new Date("2020-07-01T01:00:00"))); //1 출력
console.log(scale2(new Date("2020-07-01T01:00:05"))); //10 출력

tip!!

domain과 range값은 데이터의 최대/최소 값으로 설정하는 경우가 많은데 d3.extent(Array)를 활용하면 반환값으로 [최소값, 최대값]을 쉽게 얻을 수 있다.

2. x축과 y축 만들기

scale 함수를 이용하면 간단하게 x축과 y축을 구성할 수 있다.
축은 보통 g태그에 생성을 하는데, g태그는 svg 태그 안에서 여러 요소들을 그룹화하는데 사용한다.

d3에서는 완성된 형태의 축을 바로 생성할 수 있는 axis함수를 제공하는데 axisBottom, axisTop, axisRight, axisLeft 가 있다. 이들은 축을 기준으로 텍스트들을 어느 위치에 놓아줄지 결정해준다.

<template>
  <div>
    <svg width="350" height="350" />
  </div>
</template>

<script>
import * as d3 from "d3";

export default {
  data() {
    return {
      data: [
        { value: 3, time: new Date("2020-07-01T03:00:00") },
        { value: 1, time: new Date("2020-07-01T03:05:00") },
        { value: 9, time: new Date("2020-07-01T03:10:00") },
        { value: 6, time: new Date("2020-07-01T03:15:00") },
        { value: 2, time: new Date("2020-07-01T03:20:00") },
        { value: 6, time: new Date("2020-07-01T03:25:00") }
      ]
    };
  },
  mounted() { //react에서는 componentDidmount 실행시 축을 생성해주면 된다.
    this.generateAxis();
  },
  methods: {
    generateAxis() {
      const xScale = d3
        .scaleTime()
        .domain([
          new Date("2020-07-01T03:00:00"),
          new Date("2020-07-01T03:25:00")
        ])
        .range([20, 330]);

      const yScale = d3
        .scaleLinear()
        .domain([1, 9])
        .range([330, 20]); // SVG 좌표상에서 y값이 높을수록 아래로 향하기 때문에 뒤집어서 330~20으로 설정.

      const xAxisSVG = d3.select("svg").append("g").attr("transform", "translate(0,330)"); //attr속성을 이용하면 선택한 태그들의 속성을 바꿀 수 있다.
      const yAxisSVG = d3.select("svg").append("g");

      //축을 만드는 함수를 만든다.
      const xAxis = d3
        .axisBottom(xScale)
        .tickSize(10)
        .ticks(10); // 여기서 tick은 축마다 달려있는 막대기를 말한다.
      const yAxis = d3
        .axisRight(yScale)
        .tickSize(10)
        .ticks(10);
      xAxis(xAxisSVG); //x축을 만드는 함수로 SVG > G 태그에 축을 생성한다.
      yAxis(yAxisSVG); //y축을 만드는 함수로 SVG > G 태그에 축을 생성한다.
    }
  }
};
</script>

<style scoped></style>

위와 같이 코드를 작성하면 아래와 같은 x축과 y축을 얻을수 있다.

3. 점 차트 그리기

d3.select("svg").selectAll("circle")  	  // 1.SVG 태그 안에 있는 circle을 모두 찾는다.
      .data(this.data)                         // 2.찾은 요소에 데이터를 씌운다.
      .enter()                            // 3.찾은 요소에 개수보다 데이터가 더 많을경우..
      .append("circle")                   // 4.circle 을 추가한다.
      .attr("r", 5)                       //  - 반지름 5픽셀
      .attr("cx", d=>xScale(d.time))      //  - x 위치값 설정.
      .attr("cy", d=>yScale(d.value))     //  - y 위치값 설정. 
      .style("fill", "black")             //  - 검정색

d3에서는 데이터 개수만큼 요소를 생성해야 하는 경우에 요소를 선택하고 데이터를 씌운다. 하나씩 짝을 지어주는 것이다. 그리고 데이터가 요소보다 더 많거나 적은 경우 사용하는 함수가 있다. 위 예시와 같이 이 함수 뒤에 지시하고 싶은 함수를 추가로 붙여주면 된다.

• enter(): 데이터 > 요소
• exit(): 데이터 < 요소

4. 선 차트 그리기

선 같은 경우는 path를 이용해서 생성한다.

const linearGenerator = d3
        .line() //들어온 데이터 값을 완성된 'd' 속성의 값으로 반환해주는 함수를 만드는 함수이다.
        .x(d => xScale(d.time))
        .y(d => yScale(d.value));

      d3.select("svg")
        .append("path") // SVG 태그 안에 path 속성을 추가한다.
        .attr("d", linearGenerator(this.data)) // - 라인 생성기로 'd' 속성에 들어갈 좌표정보를 얻는다.
        .attr("fill", "none") // - 라인 안쪽 채우지 않음.
        .attr("stroke-width", 2) // - 굵기
        .attr("stroke", "blue"); // - 파랑색

• 참조사이트 https://mynameisdabin.tistory.com/15

다음 글은 line chart animation 예정입니다^^