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 différents outils et bibliothèques disponibles,D3.js (Documents fondés sur des données) se distingue par son approche puissante et flexible de la création de 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. Nous nous pencherons également sur laBibliothè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 qui sert de base à la production de 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 diagrammes et de graphiques. D3 fournit un cadre puissant pour lier des données à un modèle d'objet de document(DOM) et en appliquant au document des transformations basées sur les données, 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. Si ce n'est pas le cas, vous pouvez les télécharger et les installer à partir du site officiel de la Commission européenneSite web 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

IRON VB CONVERTER ERROR developers@ironsoftware.com

É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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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;

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

Étape 2 : Utiliser le composant

Maintenant, utilisez le composant BarChart dans votre fichier App.js et passez-lui quelques 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;

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

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 HTML en PDF: Convertit sans effort le 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 PDF directement à partir d'URL, en capturant le contenu des pages web et en les enregistrant sous forme de fichiers PDF de manière programmatique.

Manipulation de PDF: Fusionner, diviser et manipuler des documents PDF existants en toute simplicité. 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 tout accès non autorisé.

Production de documents PDF 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, notamment Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple: Intégrez facilement IronPDF à vos applications Node.js à l'aide de 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 vous ne l'avez pas encore fait) à l'aide de 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"

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

cd d3charts-pdf

cd d3charts-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

API de génération de PDF : La première étape consiste à créer une API 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();
    }
}

// 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();
'	}
'}

IronPDF nécessite une clé de licence, obtenez-la à partir de l'adresse suivantepage de licence d'essai et le placer 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>
  );
};

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

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

"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

Code Explanation:

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 ce document[L'URL d'IronPDF](/nodejs/) :

Licence d'IronPDF

LesLicence d'essai IronPDF l'outil de développement de logiciels permet aux utilisateurs de découvrir ses nombreuses fonctionnalités avant de l'acheter. De plus amples informations sur les licences perpétuelles sont disponibles sur le site web de la Commission européenneLicence IronPDF page.

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

import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here"

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.