AIDE NODE

d3 NPM (Comment ça marche pour les développeurs)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Mis à jour:juillet 28, 2025

La visualisation des données est un aspect crucial du développement web moderne, permettant de transformer des ensembles de données complexes en informations compréhensibles et exploitables. Parmi les divers outils et bibliothèques disponibles, D3.js (Documents pilotés par les données) se distingue par son approche puissante et flexible pour créer des graphiques dynamiques et interactifs depuis plus d'une décennie parmi les praticiens des données. Vous pouvez créer des applications de visualisation de données robustes, maintenables et efficaces en combinant D3.js avec React, une bibliothèque JavaScript populaire pour construire des interfaces utilisateur.

Cet article vous guidera à travers l'intégration de D3.js avec React et comment cela peut aider à visualiser des données. Nous examinerons également la bibliothèque de génération de PDF IronPDF pour générer des PDF à partir d'URL de sites web.

Qu'est-ce que D3.js ?

D3.js est une bibliothèque JavaScript agissant comme une base fondamentale pour produire des visualisations graphiques pilotées par les données, dynamiques et interactives dans les navigateurs web. Il utilise HTML, SVG et CSS pour donner vie aux données à travers divers types de tableaux et graphiques. D3 fournit un cadre puissant pour lier des données à un Modèle d'Objet Documentaire (DOM) et appliquer des transformations pilotées par les données au document, et il est utilisé comme base dans de nombreuses bibliothèques de graphiques de niveau supérieur.

Qu'est-ce que React ?

React est une bibliothèque JavaScript open-source développée par Facebook. Elle permet aux développeurs de créer des composants d'interface utilisateur réutilisables, de gérer l'état efficacement et de mettre à jour le DOM en réponse aux changements de données.

Configuration de votre environnement

Assurez-vous que Node.js et npm sont installés sur votre système. Sinon, vous pouvez les télécharger et les installer depuis le site officiel de Node.js.

Étape 1 : Créer une nouvelle application React

Tout d'abord, créez une nouvelle application React en utilisant Create React App, un outil qui configure un nouveau projet React avec une bonne configuration par défaut. Vous pouvez utiliser les commandes suivantes dans votre terminal pour accomplir cela :

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

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

SHELL

Étape 2 : Installer D3.js

Ensuite, installez le paquet npm D3.js via la commande suivante :

npm install d3

npm install d3

SHELL

Créer un graphique à barres simple

Pour démontrer comment utiliser D3.js avec React, nous allons créer un graphique à barres simple.

Étape 1 : Configurer le composant

Créez un nouveau composant appelé BarChart.js dans le dossier src, et utilisez le code suivant pour le composant :

// 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

Étape 2 : Utiliser le composant

Maintenant, utilisez le composant BarChart dans votre fichier App.js et passez-y quelques données.

// 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

Sortie

d3 NPM (Comment cela fonctionne pour les développeurs) : Figure 1 - Graphique à barres produit

Présentation d'IronPDF

d3 NPM (Comment cela fonctionne pour les développeurs) : Figure 2 - Page web IronPDF

IronPDF est un package npm robuste conçu pour faciliter la génération de PDF dans les applications Node.js. Il permet une flexibilité inégalée dans la création de documents PDF à partir de contenu HTML, d'URL ou de fichiers PDF existants. Que vous génériez des factures, des rapports ou d'autres documents, IronPDF simplifie le processus avec son API intuitive et son ensemble de fonctionnalités étendu.

Caractéristiques clés d'IronPDF

Conversion HTML en PDF : Convertissez facilement le contenu HTML en documents PDF, idéal pour générer des PDF dynamiques à partir de contenus web.
Conversion d'URL en PDF : Créez des PDF directement à partir d'URL, capturant le contenu des pages web et les enregistrant en tant que fichiers PDF de manière programmatique.
Manipulation de PDF : Fusionnez, divisez et manipulez des documents PDF existants avec facilité. IronPDF vous permet d'ajouter des pages, de diviser des documents, et plus encore.
Sécurité des PDF : Sécurisez vos documents PDF en les cryptant avec des mots de passe ou en appliquant des signatures numériques, protégeant vos documents sensibles d'un accès non autorisé.
Sortie de haute qualité : Produisez des documents PDF de haute qualité avec un rendu précis des textes, images et formats, garantissant la fidélité au contenu original.
Compatibilité multiplateforme : IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.
Intégration simple : Intégrez facilement IronPDF dans vos applications Node.js en utilisant son package npm. L'API bien documentée facilite l'incorporation des capacités de génération de PDF dans vos projets.

Que vous construisiez une application web, un script côté serveur, ou un outil en ligne de commande, IronPDF vous permet de créer des documents PDF de qualité professionnelle de manière efficace et fiable.

IronPDF et le package npm D3 : La génération de PDF facilitée

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js (si vous ne l'avez pas déjà fait) en utilisant la commande suivante :

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

Ensuite, naviguez vers votre répertoire de projet :

cd d3charts-pdf

cd d3charts-pdf

SHELL

Enfin, installez les paquets requis :

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

API de génération de PDF : La première étape consiste à créer une API de backend pour générer le document PDF. Étant donné qu'IronPDF fonctionne uniquement côté serveur, nous devons créer une API à appeler lorsque les utilisateurs souhaitent générer des PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous :

// 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 nécessite une clé de licence, que vous pouvez obtenir depuis la page de licence d'essai et l'insérer dans le code ci-dessus.

Ajoutez le code suivant pour accepter une URL de l'utilisateur, puis générez un PDF à partir de l'URL donnée dans le fichier index.js. Le code montre également comment ajouter un graphique généré par D3 et une API de backend qui prendra l'URL de l'utilisateur.

// 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

N'oubliez pas de définir le composant 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

Explication du code :

Nous créons une application Next.js et ajoutons les paquets nécessaires, IronPDF et D3.
Ensuite, nous créons le composant BarChart en utilisant D3.
Ajoutez un entrée et un bouton pour générer le document PDF.

Sorties

API :

d3 NPM (Comment cela fonctionne pour les développeurs) : Figure 3 - Section d'entrée avec le graphique à barres D3

PDF généré à partir de cette [IronPDF URL](/nodejs/) :

d3 NPM (Comment cela fonctionne pour les développeurs) : Figure 4 - PDF généré à partir de l'URL donnée par l'utilisateur

Licence IronPDF

d3 NPM (Comment cela fonctionne pour les développeurs) : Figure 5 - Page de licence IronPDF

La licence d'essai IronPDF permet aux utilisateurs de découvrir ses fonctionnalités étendues avant l'achat. Plus de détails sur la licence perpétuelle se trouvent sur la page IronPDF Licensing.

Placez la clé de licence ici :

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

Conclusion

En combinant D3.js avec React, vous pouvez exploiter les forces des deux bibliothèques pour créer des visualisations de données puissantes et interactives. React fournit un cadre robuste pour construire des interfaces utilisateur, tandis que D3.js offre des capacités étendues pour la manipulation et la visualisation des données. L'utilisation de NPM pour gérer les dépendances garantit que votre projet est maintenable et évolutif. Cet exemple de graphique à barres simple n'est qu'un début ; avec ces outils, vous pouvez créer une grande variété de visualisations de données sophistiquées et interactives adaptées à vos besoins spécifiques.

Darrius Serrant

Discutez maintenant avec l'équipe d'ingénierie

Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...