D3 - Baisc

📌 목록

• Introduction
• Adding svgs with d3
• Selection and data joins
• Loading external datas
• Conclusion

📌 Introduction

안녕하세요. 오늘은 d3의 기초적인 부분에 대해서 한번 알아보겠습니다. 그럼 한번 알아볼까요~~!?

📌 Adding svgs with d3

이제 svg를 통해 다양한 도형들을 그려보도록 하겠습니다.

// ⭐️ d3.select를 통해 dom을 지정할 수 있어요. 그리고 항상 method chaining이 가능합니다.
const svg = d3.select("#chart-area").append("svg")
  .attr("width", 400)
  .attr("height", 400)

// 이제 생성된 svg를 통해 원을 그려볼게요.
svg
  .append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20)
  .attr("fill", "red");

// 사각형도 만들수 있습니다.
svg
  .append("rect")
  .attr("width", 30)
  .attr("height", 40)
  .attr("fill", "blue")
  .attr("x", 50)
  .attr("y", 60);

// 타원도 그릴수 있구용
svg
  .append("ellipse")
  .attr("cx", 100)
  .attr("cy", 300)
  .attr("rx", 30)
  .attr("ry", 60);

// 선도 그려볼수 있습니다
svg
  .append("line")
  .attr("x1", 0)
  .attr("y1", 0)
  .attr("x2", 200)
  .attr("y2", 200)
  .attr("stroke", "black")
  .attr("stroke-width", 3);

📌 Selection and data joins

data join은 .data를 사용할 수 있습니다. 이제 한번 5개의 자료를 가지고서 data를 join을 시켜볼게요.

const data = [25, 20, 10, 12, 15];

const svg = d3
  .select("#chart-area")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

// 여기서 selectAll("circle")은 실제적으로 아무것도 나오지 않을거 예요. 아직 그리기 전이거든요.
const circles = svg.selectAll("circle").data(data);

그래서 바로 이때 enter를 사용하게 됩니다.

const data = [25, 20, 10, 12, 15];

const svg = d3
  .select("#chart-area")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

const circles = svg.selectAll("circle").data(data);

// enter가 일어나면서 이제 data를 순회하게 됩니다.
circles
  .enter()
  .append("circle")
  // 첫번쨰 인자는 data의 datum을 두번째 인자는 index를 뜻합니다.  
  .attr("cx", (d, i) => i * 60) // 상수로도 사용할 수 있지만 함수로도 선언이 가능합니다.
  .attr("cy", 250)
  .attr("r", (d) => d);

📌 Loading external datas

d3에서는 json이나 csv... 같은 파일들을 지원합니다. 그냥 d3.csv이런식으로 써주면되요. 그리고 promise를 리턴하기 때문에 then으로 이어주면 됩니다.

d3.csv("./js/ages.csv").then((data) => {
  console.log(data);
  // {name: "Tony", age: "10"}
  // {name: "Jessica", age: "12"}
  // {name: "Andrew", age: "9"}
  // {name: "Emily", age: "10"}
  // {name: "Richard", age: "11"}
});

📌 Conclusion

오늘은 한번 이렇게 d3의 기본적인 부분에 대해서 한번 알아보았습니다. 다음 포스팅에서는 d3의 가장 많이 쓰는 scale과 axes를 한번 알아보겠습니다. 그럼 안녕~!