D3.js 꺾은 선형 차트(line chart) 만들기

D3에서 기본 차트, 꺾은선형 차트를 만드는 방법을 설명한다.
Tags:

예제 프로그램

코드 확인

예제 코드

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 Line Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
  <script>
    // 1. 데이터 준비
    var dataset = [
      [5, 20],
      [25, 67],
      [85, 21],
      [100, 33],
      [220, 88],
      [250, 50],
      [330, 95],
      [410, 12],
      [475, 44],
      [480, 90]
    ];

    var width = 400; // 그래프 넓이
    var height = 300; // 그래프 높이
    var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };

    // 2. SVG 영역 설정
    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

    // 3. 축 스케일(눈금) 설정
    var xScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, function (d) { return d[0]; })])
      .range([margin.left, width - margin.right]);

    var yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, function (d) { return d[1]; })])
      .range([height - margin.bottom, margin.top]);

    // 4. 축 표시
    var axisx = d3.axisBottom(xScale).ticks(5);
    var axisy = d3.axisLeft(yScale).ticks(5);

    svg.append("g")
      .attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")
      .call(axisx)
      .append("text")
      .attr("fill", "black")
      .attr("x", (width - margin.left - margin.right) / 2 + margin.left)
      .attr("y", 35)
      .attr("text-anchor", "middle")
      .attr("font-size", "10pt")
      .attr("font-weight", "bold")
      .text("X Label");

    svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + 0 + ")")
      .call(axisy)
      .append("text")
      .attr("fill", "black")
      .attr("text-anchor", "middle")
      .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
      .attr("y", -35)
      .attr("transform", "rotate(-90)")
      .attr("font-weight", "bold")
      .attr("font-size", "10pt")
      .text("Y Label");

    // 5. 라인 표시
    svg.append("path")
      .datum(dataset)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function (d) { return xScale(d[0]); })
        .y(function (d) { return yScale(d[1]); }));
  </script>
</body>

</html>

예제 코드 설명

산포도 그래프를 단계별 그리며 설명 페이지에서는 산포도를 작성하는 방법을 자세히 소개하고 있다. 꺾은 선형 차트는 Plot의 부분을 약간 변경하면 그릴 수 있다.

1. 데이터 준비

여백을 설정하기 위해 객체를 선언하였다.

var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };

축을 표시하기 위해 하단과 왼쪽 마진을 크게 설정한다.

2. SVG 영역 설정

SVG의 표시 영역을 설정한다.

3. 축 스케일 설정

축 스케일을 설정한다.

d3.scaleLinear()

위 코드에 domain(..)으로 설정한 범위를 range(..)로 설정한 범위로 변환하는 함수를 설정한다. 선 그래프의 좌표를 화면의 픽셀 값으로 변환하는 함수를 만든다.

4. 축 표시

D3의 함수 d3.axisBottom()과 d3.axisLeft()를 사용하여 축 요소를 설정한다. 인수를 축 스케일의 설정으로 설정한 함수로 하여, call로 호출하는 것으로 SVG 요소가 자동적으로 추가된다.

  var axisx = d3.axisBottom(xScale).ticks(5);
  var axisy = d3.axisLeft(yScale).ticks(5);

  svg.append("g")
    .attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")
    .call(axisx)

  svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + 0 + ")")
    .call(axisy)

.ticks()는 축 메모리의 수를 제어하는 ​​메소드입니다. 정수로 설정한다.

축을 호출하고, text 요소로 축 레이블을 추가한다.

    .append("text")
    .attr("fill", "black")
    .attr("x", (width - margin.left - margin.right) / 2 + margin.left)
    .attr("y", 35)
    .attr("text-anchor", "middle")
    .attr("font-size", "10pt")
    .attr("font-weight", "bold")
    .text("X Label");

    .append("text")
    .attr("fill", "black")
    .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
    .attr("y", -35)
    .attr("transform", "rotate(-90)")
    .attr("text-anchor", "middle")
    .attr("font-weight", "bold")
    .attr("font-size", "10pt")
    .text("Y Label");

"text-anchor"는 텍스트의 위치 맞춤을 위한 속성으로, "middle"로 중앙 정렬을 설정하고 있다. 각각 축에 쓰이지 않도록 35px씩 이동하고 있다.

5. 라인 표시

꺾은 선형 차트의 라인을 "path" 요소로 표시한다. 데이터 바인딩은 아래와 같이 하고 있다.

.datum(dataset)

하나의 데이터를 바인드하는 data와 달리 path 하나에 데이터 세트를 추가하기 위해 datum을 사용한다.

아래 코드 SVG 요소의 경로의 "d"속성을 만드는 메서드이다.

  d3.line()
    .x(function(d) { return xScale(d[0]); })
    .y(function(d) { return yScale(d[1]); })

마무리

꺾은선형 차트는 막 바 차트 및 산포도와 동일한 알고리즘으로 만들 수 있다. 하나를 만들면 다른 그래프에 쉽게 적용할 수 있다.




최종 수정 : 2024-01-18