ライブ環境でテストする
ウォーターマークなしで本番環境でテストしてください。
必要な場所でいつでも動作します。
完全に機能する製品
30日間のフル機能製品をお試しください。
数分で稼働させることができます。
24/5 テクニカルサポート
製品トライアル期間中にサポートエンジニアリングチームへの完全アクセス
ノードヘルプ
d3 NPM (開発者のための仕組み)
公開済み 2024年8月13日
イントロダクション
データの視覚化は、複雑なデータセットを理解しやすく実用的な洞察に変換するのに役立つ、現代のウェブ開発において重要な側面です。 さまざまなツールやライブラリがある、D3.js (データ駆動型ドキュメント)ダイナミックでインタラクティブなグラフを作成するための強力で柔軟なアプローチは、データ実務家の間で10年以上にわたって際立っています。 D3.jsと、ユーザーインターフェイスを構築するための一般的なJavaScriptライブラリであるReactを組み合わせることで、堅牢で保守性が高く、効率的なデータ可視化アプリケーションを作成できます。
この記事では、D3.jsをReactと統合し、データを視覚化する際にどのように役立つかを説明する。 またIronPDF PDF生成ライブラリ。ウェブサイトのURLから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-appnpx create-react-app d3-react-app
cd d3-react-appIRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
ステップ2：D3.jsをインストールする
次に、以下のコマンドでD3.jsのnpmパッケージをインストールする：
npm install d3npm install d3IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
簡単な棒グラフの作成
ReactとD3.jsの使い方を説明するために、簡単な棒グラフを作ってみよう。
ステップ1：コンポーネントのセットアップ
srcフォルダにBarChart.js`という新しいコンポーネントを作成し、そのコンポーネントに以下のコードを使用する：
// 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#
出力
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-pdfcd d3charts-pdfIRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
最後に、必要なパッケージをインストールする：
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3IRON 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();
}
}' pages/api/pdf.js
import
If True Then
IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'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();
' }
'}
VB
C#
IronPDFにはライセンスキーが必要です。**トライアルライセンスページそれを上記のコードに配置する。
ユーザーから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>
);
};"use client"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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"c, value: 30 }, { name: "B"c, value: 80 }, { name: "C"c, value: 45 }, { name: "D"c, value: 60 }, { name: "E"c, value: 20 }, { name: "F"c, value: 90 }, { name: "G"c, 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>); };
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#
**コード説明
-
Next.jsアプリを作成し、必要なパッケージIronPDFとD3を追加します。
-
次に、D3を使用してBarChartコンポーネントを作成します。
- 入力とボタンを追加して、PDFドキュメントを生成してください。
出力
API:
ここから生成されたPDF[IronPDF URL.](/nodejs/):
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";import
If True Then
IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here"
VB
C#
結論
D3.jsとReactを組み合わせることで、両ライブラリの強みを活かし、パワフルでインタラクティブなデータビジュアライゼーションを作成できる。 Reactはユーザー・インターフェースを構築するための堅牢なフレームワークを提供し、D3.jsはデータ操作と視覚化のための広範な機能を提供する。 NPMを使用して依存関係を管理することで、プロジェクトの保守性と拡張性が保証されます。 この単純な棒グラフの例は、ほんの始まりに過ぎない； これらのツールを使用することで、特定のニーズに合わせた、洗練されたインタラクティブなデータ可視化を幅広く作成することができます。
