푸터 콘텐츠로 바로가기
  1. Node.js용 IronPDF
  2. Node.js용 IronPDF 블로그
  3. 노드 도움말
  4. d3 NPM
노드 도움말

d3 NPM (개발자를 위한 작동 방식)

다리우스 세란트
다리우스 세란트
업데이트됨:

데이터 시각화는 현대 웹 개발에서 매우 중요한 요소로, 복잡한 데이터 세트를 이해하기 쉽고 실행 가능한 통찰력으로 변환하는 데 도움을 줍니다. 다양한 도구와 라이브러리 중에서 D3.js (Data-Driven Documents)는 10년 이상 데이터 전문가들 사이에서 동적이고 상호작용적인 그래프를 생성하는 강력하고 유연한 접근 방식으로 두각을 나타내고 있습니다. 인기 있는 사용자 인터페이스 구축용 JavaScript 라이브러리인 React와 D3.js를 결합하면 견고하고 유지 관리하기 쉬우며 효율적인 데이터 시각화 애플리케이션을 만들 수 있습니다.

이 글에서는 D3.js를 React와 통합하는 방법과 이를 통해 데이터를 시각화하는 방법을 안내합니다. 또한, 웹사이트 URL에서 PDF를 생성하기 위해 IronPDF PDF 생성 라이브러리에 대해서도 살펴보겠습니다.

D3.js란 무엇인가요?

D3.js 는 웹 브라우저에서 동적이고 상호작용적인 데이터 기반 그래픽 시각화를 생성하기 위한 기본 구성 요소 역할을 하는 JavaScript 라이브러리입니다. D3는 HTML, SVG, CSS를 사용하여 다양한 유형의 차트와 그래프를 통해 데이터를 시각적으로 표현합니다. 또한, 데이터를 DOM(문서 객체 모델)에 바인딩하고 데이터 기반 변환을 문서에 적용하는 강력한 프레임워크를 제공하며, 많은 상위 수준 차트 라이브러리의 기반으로 사용됩니다.

React란 무엇인가요?

React는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리입니다. 이를 통해 개발자는 재사용 가능한 UI 구성 요소를 만들고, 상태를 효율적으로 관리하며, 데이터 변경에 따라 DOM을 업데이트할 수 있습니다.

환경 설정하기

Node.js 와 npm이 시스템에 설치되어 있는지 확인하세요. 그렇지 않다면 Node.js 공식 웹사이트 에서 다운로드하여 설치할 수 있습니다.

1단계: 새 React 애플리케이션 생성

먼저, Create React App이라는 도구를 사용하여 새로운 React 애플리케이션을 생성합니다. 이 도구는 적절한 기본 설정으로 새로운 React 프로젝트를 만들어 줍니다. 터미널에서 다음 명령어를 사용하여 이 작업을 수행할 수 있습니다.

npx create-react-app d3-react-app
cd d3-react-app
npx create-react-app d3-react-app
cd d3-react-app
SHELL

2단계: D3.js 설치

다음으로, 다음 명령어를 통해 D3.js npm 패키지를 설치하세요.

npm install d3
npm install d3
SHELL

간단한 막대 그래프 만들기

React에서 D3.js를 사용하는 방법을 보여주기 위해 간단한 막대 그래프를 만들어 보겠습니다.

1단계: 구성 요소 설정

새로운 컴포넌트를 BarChart.js이라 이름 짓고 src 폴더에 생성한 후, 아래 코드를 컴포넌트에 사용하세요:

// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// BarChart component
const BarChart = ({ data }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
};

export default BarChart;
// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// BarChart component
const BarChart = ({ data }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
};

export default BarChart;
JAVASCRIPT

2단계: 구성 요소를 사용합니다.

이제 BarChart 컴포넌트를 App.js 파일에서 사용하고, 데이터를 전달하세요.

// src/App.js
import React from 'react';
import BarChart from './BarChart';

const App = () => {
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  return (
    <div className="App">
      <h1>Bar Chart</h1>
      <BarChart data={data} />
    </div>
  );
};

export default App;
// src/App.js
import React from 'react';
import BarChart from './BarChart';

const App = () => {
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  return (
    <div className="App">
      <h1>Bar Chart</h1>
      <BarChart data={data} />
    </div>
  );
};

export default App;
JAVASCRIPT

출력

d3 NPM (개발자에게 어떻게 작동하는가): 그림 1 - 출력된 막대 차트

IronPDF 소개합니다

d3 NPM (개발자에게 어떻게 작동하는가): 그림 2 - IronPDF 웹페이지

IronPDF 는 Node.js 애플리케이션 내에서 PDF 생성을 용이하게 하도록 설계된 강력한 npm 패키지입니다. 이 기능을 통해 HTML 콘텐츠, URL 또는 기존 PDF 파일에서 PDF 문서를 생성할 때 비교할 수 없는 유연성을 누릴 수 있습니다. IronPDF 직관적인 API와 광범위한 기능 세트를 통해 송장, 보고서 또는 기타 문서를 생성하는 과정을 간소화합니다.

IronPDF 의 주요 기능

  • HTML을 PDF로 변환: HTML 콘텐츠를 PDF 문서로 손쉽게 변환할 수 있어 웹 콘텐츠에서 동적 PDF를 생성하는 데 이상적입니다.

  • URL을 PDF로 변환: URL에서 직접 PDF를 생성하여 웹 페이지의 콘텐츠를 캡처하고 프로그램 방식으로 PDF 파일로 저장합니다.

  • PDF 조작: 기존 PDF 문서를 손쉽게 병합, 분할 및 조작할 수 있습니다. IronPDF 사용하면 페이지를 추가하고, 문서를 분할하는 등의 작업을 수행할 수 있습니다.

  • PDF 보안: PDF 문서를 암호로 암호화하거나 디지털 서명을 적용하여 무단 접근으로부터 중요한 문서를 보호하세요.

  • 고품질 출력: 텍스트, 이미지 및 서식을 정확하게 표현하여 원본 콘텐츠에 충실한 고품질 PDF 문서를 생성합니다.

  • 크로스 플랫폼 호환성: IronPDF Windows, Linux, macOS를 비롯한 다양한 플랫폼과 호환되므로 폭넓은 개발 환경에 적합합니다.

  • 간편한 통합: IronPDF의 npm 패키지를 사용하여 Node.js 애플리케이션에 IronPDF 쉽게 통합할 수 있습니다. 잘 정리된 API 덕분에 프로젝트에 PDF 생성 기능을 손쉽게 통합할 수 있습니다.

웹 애플리케이션, 서버 측 스크립트 또는 명령줄 도구를 개발하든 IronPDF 사용하면 전문가 수준의 PDF 문서를 효율적이고 안정적으로 생성할 수 있습니다.

IronPDF 및 D3 npm 패키지: PDF 생성을 간편하게

필수 구성 요소 설치: 먼저 다음 명령어를 사용하여 새 Next.js 프로젝트를 생성합니다(아직 생성하지 않은 경우).

npx create-next-app@latest d3charts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
npx create-next-app@latest d3charts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
SHELL

다음으로 프로젝트 디렉토리로 이동하세요.

cd d3charts-pdf
cd d3charts-pdf
SHELL

마지막으로 필요한 패키지를 설치하세요.

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3
SHELL

PDF 생성 API: 첫 번째 단계는 PDF 문서를 생성하는 백엔드 API를 만드는 것입니다. IronPDF 서버 측에서만 실행되므로 사용자가 PDF를 생성하고자 할 때 호출할 API를 만들어야 합니다. pages/api/pdf.js 경로에 파일을 생성하고 아래 내용물을 추가하세요:

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    console.error('data PDF:', data);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}
// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    console.error('data PDF:', data);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}
JAVASCRIPT

IronPDF 사용하려면 라이선스 키가 필요합니다. 라이선스 키는 평가판 라이선스 페이지 에서 발급받아 위의 코드에 붙여넣으면 됩니다.

사용자로부터 URL을 받아들인 후 주어진 URL에서 PDF를 생성하는 코드를 index.js 파일에 추가하세요. 또한, D3로 생성된 그래프와 사용자의 URL을 받을 백엔드 API를 추가하는 방법도 보여줍니다.

// index.js
"use client";
import React, { useState } from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";

export default function D3Demo() {
  const [text, setText] = useState("");
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text, {
        method: "GET",
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <h1>Bar Chart</h1>
      <D3BarChart data={data} />
      <p>
        <span>Enter URL To Convert to PDF:</span>{" "}
        <input type="text" value={text} onChange={handleChange} />
      </p>
      <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
        Generate PDF
      </button>
    </div>
  );
}
// index.js
"use client";
import React, { useState } from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";

export default function D3Demo() {
  const [text, setText] = useState("");
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text, {
        method: "GET",
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <h1>Bar Chart</h1>
      <D3BarChart data={data} />
      <p>
        <span>Enter URL To Convert to PDF:</span>{" "}
        <input type="text" value={text} onChange={handleChange} />
      </p>
      <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
        Generate PDF
      </button>
    </div>
  );
}
JAVASCRIPT

D3BarChart 컴포넌트를 정의하는 것을 잊지 마세요:

// d3BarChart.js
"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// D3BarChart component
export default function D3BarChart({ data }) {
  const svgRef = useRef(); // ref svg element

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
}
// d3BarChart.js
"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// D3BarChart component
export default function D3BarChart({ data }) {
  const svgRef = useRef(); // ref svg element

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
}
JAVASCRIPT

코드 설명:

  1. Next.js 앱을 생성하고 필요한 패키지인 IronPDF 와 D3를 추가합니다.
  2. 그런 다음 D3를 사용하여 막대 차트 구성 요소를 생성합니다.
  3. PDF 문서를 생성하는 입력란과 버튼을 추가합니다.

출력

API:

d3 NPM (개발자에게 어떻게 작동하는가): 그림 3 - D3 막대 차트가 포함된 입력 섹션

이 내용을 바탕으로 생성된 PDF 파일 IronPDF URL :

d3 NPM (개발자에게 어떻게 작동하는가): 그림 4 - 사용자 제공 URL에서 생성된 PDF

IronPDF 라이선스

d3 NPM (개발자에게 어떻게 작동하는가): 그림 5 - IronPDF 라이선스 페이지

IronPDF 평가판 라이선스를 사용하면 구매 전에 다양한 기능을 확인해 볼 수 있습니다. 영구 라이선스에 대한 자세한 내용은 IronPDF 라이선스 페이지에서 확인할 수 있습니다.

라이선스 키를 여기에 입력하세요:

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
JAVASCRIPT

결론

D3.js와 React를 결합하면 두 라이브러리의 장점을 활용하여 강력하고 상호작용적인 데이터 시각화를 만들 수 있습니다. React는 사용자 인터페이스 구축을 위한 강력한 프레임워크를 제공하며, D3.js는 데이터 조작 및 시각화를 위한 광범위한 기능을 제공합니다. NPM을 사용하여 종속성을 관리하면 프로젝트의 유지 관리성과 확장성을 확보할 수 있습니다. 이 간단한 막대 그래프 예시는 시작에 불과합니다. 이러한 도구를 사용하면 특정 요구 사항에 맞춰 다양하고 정교하며 상호 작용적인 데이터 시각화를 만들 수 있습니다.

다리우스 세란트
다리우스 세란트
  지금 바로 엔지니어링 팀과 채팅하세요
풀스택 소프트웨어 엔지니어 (웹 운영)

다리우스 세런트는 마이애미 대학교에서 컴퓨터 과학 학사 학위를 받았으며, Iron Software에서 풀 스택 웹 운영 마케팅 엔지니어로 근무하고 있습니다. 어린 시절부터 코딩에 매료되었던 그는 컴퓨팅이 신비로우면서도 접근하기 쉬운 분야라고 생각했고, 창의력과 문제 해결 능력을 발휘하기에 완벽한 매체라고 여겼습니다.

Iron Software에서 다리우스는 새로운 것을 만들고 복잡한 개념을 단순화하여 더 쉽게 이해할 수 있도록 하는 것을 즐깁니다. 그는 사내 개발자로서 학생들을 가르치는 데에도 자원하여 차세대 인재들과 전문 지식을 공유하고 있습니다.

다리우스에게 있어 그의 일은 가치 있고 실질적인 영향을 미치기 때문에 보람 있는 일입니다.

관련 기사

30일 무료 체험 → 모든 기능 이용 가능. 제한 없음. 카드 정보 필요 없음. 무료 체험 시작하기

아이언 서포트 팀

저희는 주 5일, 24시간 온라인으로 운영합니다.
채팅
이메일
전화해