[010] d3.area

 

d3.area

---

d3.area 는 선 밑으로 영역을 그릴 때 사용되는 함수입니다. 

 

 

예제

---

다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.)

import * as d3 from 'd3';

interface Data {
  x: number;
  y: number;
}

window.addEventListener('load', function() {
  const data: Data[] = [
    {x: 0, y: 20},
    {x: 10, y: 15},
    {x: 20, y: 50},
    {x: 30, y: 35},
    {x: 40, y: 70},
    {x: 50, y: 115},
    {x: 60, y: 89},
    {x: 90, y: 60},
    {x: 125, y: 15},
  ];

  // data.sort((a, b) => a.y - b.y);
  console.log('data', data);

  // const xScale = d3.scaleLinear().domain([0, 6]).range([25, 175]);
  // const yScale = d3.scaleLinear().domain([0, 20]).range([175, 25]);

  const area = d3.area<Data>()
    .x(d => d.x) // 좌표의 x 값
    .y0(50) // 영역을 그리는 y 축의 기준 값 (이 축을 기준으로 상, 하 영역이 구분됨.)
    .y1(d => d.y) // 좌표의 y 값
  ; 

  d3.select("svg")
    .append("path")
    .attr("d", area(data))
    .attr("fill", "green")
    .attr("stroke", "black");
});

 

 

html 코드는 다음과 같이 작성합니다.

<div class="box">
  <svg width="300" height="300" style="border: 1px solid #ccc;">

  </svg>
</div>

 

결과는 다음과 같습니다.

 

참고

---

https://www.geeksforgeeks.org/d3-js-area-method/

D3.js area() Method - GeeksforGeeks