ノードヘルプ

d3 NPM (開発者のための仕組み)

更新済み 8月 13, 2024

共有:

イントロダクション

データの視覚化は、複雑なデータセットを理解しやすく実用的な洞察に変換するのに役立つ、現代のウェブ開発において重要な側面です。さまざまなツールやライブラリがある、 D3.js (データ駆動型ドキュメント) ダイナミックでインタラクティブなグラフを作成するための強力で柔軟なアプローチは、データ実務家の間で10年以上にわたって際立っています。 D3.jsと、ユーザーインターフェイスを構築するための一般的なJavaScriptライブラリであるReactを組み合わせることで、堅牢で保守性が高く、効率的なデータ可視化アプリケーションを作成できます。

この記事では、D3.jsをReactと統合し、データを視覚化する際にどのように役立つかを説明する。また IronPDF ウェブサイトのURLからPDFを生成するPDF生成ライブラリ。

D3.jsとは？

D3.js は、ウェブブラウザ上でダイナミックでインタラクティブなデータ駆動型グラフィックスのビジュアライゼーションを作成するための基礎的なビルディングブロックとして機能するJavaScriptライブラリです。 HTML、SVG、CSSを使用し、様々なタイプのチャートやグラフを通してデータに命を吹き込む。D3は、Document Object Modelにデータをバインドするための強力なフレームワークを提供する。 (DOM（文書オブジェクトモデル）) また、ドキュメントにデータ駆動型の変換を適用することもでき、多くの上位レベルのチャート・ライブラリのベースとして使用されている。

リアクトとは何か？

Reactは、Facebookによって構築されたオープンソースのJavaScriptライブラリである。これにより、開発者は再利用可能なUIコンポーネントを作成し、ステートを効率的に管理し、データの変更に応じてDOMを更新することができる。

環境の設定

Node.jsとnpmがシステムにインストールされていることを確認する。そうでない場合は、以下の公式サイトからダウンロードしてインストールすることができる。 Node.js ウェブサイト.

ステップ1：新しいReactアプリケーションを作成する

まず、Create React Appというツールを使って新しいReactアプリケーションを作成する。そのためには、ターミナルで以下のコマンドを使用する：

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

ステップ2：D3.jsをインストールする

次に、以下のコマンドでD3.jsのnpmパッケージをインストールする：

npm install d3

npm install d3

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

簡単な棒グラフの作成

ReactとD3.jsの使い方を説明するために、簡単な棒グラフを作ってみよう。

ステップ1：コンポーネントのセットアップ

を作成し、そのコンポーネントに以下のコードを使用します：

// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
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 };
    svg.attr('width', width).attr('height', height);
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));
    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);
    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 ;
};
export default BarChart;

// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
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 };
    svg.attr('width', width).attr('height', height);
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));
    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);
    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 ;
};
export default BarChart;

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

ステップ 2: コンポーネントの使用

ここで、"App.js "ファイル内で "BarChart "コンポーネントを使用し、データを渡します。

// src/App.js
import React from 'react';
import BarChart from './BarChart';
const App = () => {
  const data = [ // d3 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} />// bind data
    </div>
  );
};
export default App;

// src/App.js
import React from 'react';
import BarChart from './BarChart';
const App = () => {
  const data = [ // d3 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} />// bind data
    </div>
  );
};
export default App;

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

出力

d3 NPM (開発者向けの仕組み)：図1 - 出力された棒グラフ

IronPDFの紹介

d3 NPM (開発者のための仕組み)：図2 - IronPDFのウェブページ

IronPDF は、Node.jsアプリケーション内でのPDF生成を容易にするために設計された堅牢なnpmパッケージです。 HTMLコンテンツ、URL、または既存のPDFファイルからPDF文書を作成する際に、比類のない柔軟性を実現します。請求書、レポート、その他のドキュメントの作成において、IronPDFは直感的なAPIと豊富な機能でプロセスを簡素化します。

IronPDFの主な機能

HTMLからPDFへの変換：ウェブコンテンツから動的なPDFを生成するための理想的なPDF文書にHTMLコンテンツを簡単に変換します。

URLからPDFへの変換: URLから直接PDFを作成し、ウェブページの内容をキャプチャし、プログラムでPDFファイルとして保存します。

**既存のPDF文書を簡単に結合、分割、操作できます。 IronPDFはページの追加、ドキュメントの分割などを可能にします。

PDFセキュリティ：パスワードで暗号化するか、デジタル署名を適用することにより、PDF文書を保護し、不正アクセスから機密文書を保護します。

高品質の出力： テキスト、画像、書式を正確にレンダリングし、元のコンテンツに忠実な高品質のPDFドキュメントを作成します。

クロスプラットフォーム互換性: IronPDFはWindows、Linux、macOSを含む様々なプラットフォームと互換性があり、幅広い開発環境に適しています。

シンプルな統合: Node.jsアプリケーションにIronPDFをnpmパッケージを使って簡単に統合できます。十分に文書化されたAPIにより、PDF生成機能をプロジェクトに簡単に組み込むことができます。

Webアプリケーション、サーバーサイドスクリプト、コマンドラインツールのいずれを構築する場合でも、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"

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

次に、プロジェクト・ディレクトリに移動する：

cd d3charts-pdf

cd d3charts-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

最後に、必要なパッケージをインストールする：

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

PDF Generation 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();
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

IronPDFにはライセンスキーが必要です。 [以下の内容を日本語に翻訳します：

ここに

ご希望のイディオムや技術用語が追加されることによって、より適切な翻訳が提供できる場合もありますので、詳細なコンテキストを教えていただけると幸いです。](trial-license) それを上記のコードに配置する。

ユーザーからURLを受け取り、与えられたURLからindex.jsファイルにPDFを生成するために、以下のコードを追加します。以下のコードは、ユーザーのURLを取り込むAPIにD3生成グラフを追加する方法も示しています。

"use client";
import React from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";
import { useState, HTMLDivElement } from "react";
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>{" "}
          </p>
          <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
            Generate PDF
          </button>
    </div>
  );
};

"use client";
import React from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";
import { useState, HTMLDivElement } from "react";
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>{" "}
          </p>
          <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
            Generate PDF
          </button>
    </div>
  );
};

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

D3BarChartコンポーネントを定義することを忘れないでください：

"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
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 };
      svg.attr('width', width).attr('height', height);
      const x = d3.scaleBand()
        .domain(data.map(d => d.name))
        .range([margin.left, width - margin.right])
        .padding(0.1);
      const y = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .nice()
        .range([height - margin.bottom, margin.top]);
      const xAxis = g => g
        .attr('transform', `translate(0,${height - margin.bottom})`)
        .call(d3.axisBottom(x).tickSizeOuter(0));
      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);
      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 ;
  };

"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
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 };
      svg.attr('width', width).attr('height', height);
      const x = d3.scaleBand()
        .domain(data.map(d => d.name))
        .range([margin.left, width - margin.right])
        .padding(0.1);
      const y = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .nice()
        .range([height - margin.bottom, margin.top]);
      const xAxis = g => g
        .attr('transform', `translate(0,${height - margin.bottom})`)
        .call(d3.axisBottom(x).tickSizeOuter(0));
      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);
      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 ;
  };

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

**コード説明

次のJSアプリを作成し、必要なパッケージ、IronPDFとD3を追加します。
次に、D3を使用してBarChartコンポーネントを作成します。
入力とボタンを追加してPDF文書を生成する

出力

API:

d3 NPM（開発者のための仕組み）：図3 - D3棒グラフの入力セクション

このから生成されたPDF URL:

d3 NPM (開発者向けの仕組み)：図4 - ユーザーが指定したURLから生成されたPDF

IronPDFライセンス

d3 NPM (開発者向けの仕組み)：図5 - 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";

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

結論

D3.jsとReactを組み合わせることで、両ライブラリの強みを活かし、パワフルでインタラクティブなデータビジュアライゼーションを作成できる。 Reactはユーザー・インターフェースを構築するための堅牢なフレームワークを提供し、D3.jsはデータ操作と視覚化のための広範な機能を提供する。 NPMを使用して依存関係を管理することで、プロジェクトの保守性と拡張性が保証されます。この単純な棒グラフの例は、ほんの始まりに過ぎない；これらのツールを使用することで、特定のニーズに合わせた、洗練されたインタラクティブなデータ可視化を幅広く作成することができます。

< 以前
recharts NPM (開発者のための仕組み)

次へ >
Lodash NPM (開発者のための仕組み)