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

Introduction

La visualisation des données est un aspect crucial du développement web moderne, car elle permet 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 Data-Driven) 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, faciles à maintenir et efficaces en combinant D3.js avec React, une bibliothèque JavaScript populaire pour la construction d'interfaces utilisateur.

Cet article vous guidera dans l'intégration de D3.js avec React et comment il peut aider à la visualisation des données. De plus, nous examinerons la bibliothèque de génération de PDF IronPDF pour générer des PDFs à partir d'URL de sites web.

Qu'est-ce que D3.js ?

D3.js est une bibliothèque JavaScript servant de base fondamentale pour produire des visualisations graphiques dynamiques et interactives basées sur des données dans les navigateurs web. Il utilise HTML, SVG et CSS pour donner vie aux données à travers différents types de graphiques et de diagrammes. D3 offre un cadre puissant pour lier les données à un modèle d'objet de document (DOM) et appliquer des transformations basées sur 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 créée par Facebook. Il permet aux développeurs de créer des composants d'interface utilisateur réutilisables, de gérer l'état de manière efficace et de mettre à jour le DOM en fonction des changements de données.

Mise en place de l'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 à partir du site officiel de Node.js.

Étape 1 : Créer une nouvelle application React

Tout d'abord, créez une nouvelle application React à l'aide de Create React App, un outil qui met en place un nouveau projet React avec une bonne configuration par défaut. Pour ce faire, vous pouvez utiliser les commandes suivantes dans votre terminal :

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

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

Étape 2 : Installer D3.js

Ensuite, installez le paquetage npm de D3.js à l'aide de la commande suivante :

npm install d3

npm install d3

Création d'un diagramme à barres simple

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

Étape 1 : Mise en place du 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';
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;

js

Étape 2 : Utiliser le composant

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

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

js

Sortie

Présentation d'IronPDF

IronPDF est un package npm robuste conçu pour faciliter la génération de PDF au sein des applications Node.js. Il offre une souplesse inégalée dans la création de documents PDF à partir de contenu HTML, d'URL ou de fichiers PDF existants. Qu'il s'agisse de générer des factures, des rapports ou d'autres documents, IronPDF simplifie le processus grâce à son API intuitive et à son vaste ensemble de fonctionnalités.

Principales caractéristiques d'IronPDF

Conversion de HTML en PDF : Convertissez facilement du contenu HTML en documents PDF, idéal pour générer des PDF dynamiques à partir de contenu web.

Conversion d'URL en PDF : Créez des PDFs directement à partir d'URLs, en capturant le contenu des pages web et en les enregistrant sous forme de fichiers PDF par programmation.

Manipulation de PDF : Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF vous permet d'ajouter des pages, de diviser des documents, etc.

Sécurité PDF : Sécurisez vos documents PDF en les cryptant avec des mots de passe ou en appliquant des signatures numériques, protégeant ainsi vos documents sensibles contre les accès non autorisés.

Sortie de haute qualité : Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme, 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é à un large éventail 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 permet d'intégrer facilement des fonctionnalités de génération de PDF dans vos projets.

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

IronPDF et D3 npm Package : Génération de PDF en toute simplicité

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js (si ce n'est 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"

Ensuite, accédez au répertoire de votre projet :

cd d3charts-pdf

cd d3charts-pdf

Enfin, installez les paquets nécessaires :

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

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

API de génération de PDF : La première étape consiste à créer une API backend pour générer le document PDF. Comme IronPDF ne fonctionne que côté serveur, nous devons créer une API à appeler lorsque les utilisateurs veulent 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();
    }
}

js

IronPDF nécessite une clé de licence, obtenez-la depuis la page de licence d'essai et placez-la dans le code ci-dessus.

Ajoutez le code ci-dessous pour accepter une URL de l'utilisateur, puis générer un PDF à partir de l'URL donnée dans le fichier index.js. Le code ci-dessous montre également comment ajouter un graphique généré par D3 à l'API qui prendra en compte l'URL de l'utilisateur.

"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>
  );
};

js

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

js

Explication du code :

1. Nous créons une application Next.js et ajoutons les packages nécessaires, IronPDF et D3.

2. Nous créons ensuite le composant BarChart à l'aide de D3.

3. Ajoutez une entrée et un bouton pour générer le document PDF.

Sorties

API :

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

Licence d'IronPDF

La licence d'essai IronPDF permet aux utilisateurs de découvrir ses vastes fonctionnalités avant l'achat. Plus de détails sur la licence perpétuelle peuvent être trouvés 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";

js

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 la construction d'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 la maintenabilité et l'évolutivité de votre projet. Cet exemple de diagramme à barres simple n'est qu'un début ; grâce à 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.