d3 NPM (Cómo funciona para los desarrolladores)

Introducción

La visualización de datos es un aspecto crucial del desarrollo web moderno, ya que ayuda a transformar conjuntos de datos complejos en perspectivas comprensibles y procesables. Entre las diversas herramientas y bibliotecas disponibles,D3.js (Documentos basados en datos) destaca por su enfoque potente y flexible para crear gráficos dinámicos e interactivos desde hace más de una década entre los profesionales de los datos. Puede crear aplicaciones de visualización de datos sólidas, fáciles de mantener y eficientes al combinar D3.js con React, una popular biblioteca de JavaScript para crear interfaces de usuario.

Este artículo le guiará a través de la integración de D3.js con React y cómo puede ayudar con la visualización de datos. Además, examinaremos laBiblioteca de generación de PDF IronPDF para generar PDF a partir de URL de sitios web.

¿Qué es D3.js?

D3.js es una biblioteca JavaScript que sirve de base para producir visualizaciones gráficas dinámicas e interactivas basadas en datos en navegadores web. Utiliza HTML, SVG y CSS para dar vida a los datos mediante diversos tipos de diagramas y gráficos. D3 proporciona un potente marco para vincular datos a un Modelo de Objetos de Documento(DOM) y aplicar transformaciones basadas en datos al documento, y se utiliza como base en muchas bibliotecas de gráficos de nivel superior.

¿Qué es React?

React es una biblioteca JavaScript de código abierto creada por Facebook. Permite a los desarrolladores crear componentes de interfaz de usuario reutilizables, gestionar el estado de forma eficiente y actualizar el DOM en respuesta a cambios en los datos.

Configuración del entorno

Asegúrate de que Node.js y npm están instalados en tu sistema. Si no es así, puede descargarlos e instalarlos desde la página oficialSitio web Node.js.

Paso 1: Crear una nueva aplicación React

Primero, crea una nueva aplicación React usando Create React App, una herramienta que configura un nuevo proyecto React con una buena configuración por defecto. Para ello, puede utilizar los siguientes comandos en su 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

Paso 2: Instalar D3.js

A continuación, instala el paquete npm D3.js mediante el siguiente comando:

npm install d3

npm install d3

IRON VB CONVERTER ERROR developers@ironsoftware.com

Creación de un gráfico de barras sencillo

Para demostrar cómo usar D3.js con React, crearemos un simple gráfico de barras.

Paso 1: Configurar el componente

Cree un nuevo componente llamado BarChart.js en la carpeta src y utilice el siguiente código para el componente:

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

Paso 2: Utilizar el componente

Ahora, utiliza el componente BarChart en tu archivo App.js y pásale algunos datos.

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

Salida

Presentación de IronPDF

IronPDF es un robusto paquete npm diseñado para facilitar la generación de PDF en aplicaciones Node.js. Permite una flexibilidad sin precedentes en la creación de documentos PDF a partir de contenidos HTML, URL o archivos PDF existentes. Ya se trate de generar facturas, informes u otros documentos, IronPDF simplifica el proceso con su intuitiva API y su amplio conjunto de funciones.

Características principales de IronPDF

Conversión de HTML a PDF: Convierta sin esfuerzo contenidos HTML en documentos PDF, ideal para generar PDF dinámicos a partir de contenidos web.

Conversión de URL a PDF: Crea PDFs directamente a partir de URLs, capturando el contenido de páginas web y guardándolas como archivos PDF mediante programación.

Manipulación de PDF: Fusione, divida y manipule documentos PDF existentes con facilidad. IronPDF le permite añadir páginas, dividir documentos y mucho más.

Seguridad PDF: Asegure sus documentos PDF cifrándolos con contraseñas o aplicando firmas digitales, protegiendo sus documentos confidenciales de accesos no autorizados.

**Produce documentos PDF de alta calidad con una representación precisa del texto, las imágenes y el formato, garantizando la fidelidad al contenido original.

Compatibilidad multiplataforma: IronPDF es compatible con varias plataformas, como Windows, Linux y macOS, lo que lo hace adecuado para una amplia gama de entornos de desarrollo.

Integración sencilla: Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API bien documentada facilita la incorporación de funciones de generación de PDF a sus proyectos.

Tanto si está creando una aplicación web, un script del lado del servidor o una herramienta de línea de comandos, IronPDF le permite crear documentos PDF de calidad profesional de forma eficaz y fiable.

Paquete npm IronPDF y D3: PDF Generation Made Easy

Instalar dependencias: Primero, crea un nuevo proyecto Next.js(si aún no lo ha hecho) utilizando el siguiente comando:

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

A continuación, vaya al directorio de su proyecto:

cd d3charts-pdf

cd d3charts-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

Por último, instale los paquetes necesarios:

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 generación de PDF: El primer paso es crear una API backend para generar el documento PDF. Dado que IronPDF sólo se ejecuta en el servidor, necesitamos crear una API a la que llamar cuando los usuarios quieran generar PDFs. Crea un archivo en la ruta pages/api/pdf.js y añade el siguiente contenido:

// 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 requiere una clave de licencia, que puede obtenerse en la páginapágina de licencia de prueba y colócalo en el código anterior.

Agregue el siguiente código para aceptar una URL del usuario, y luego generar un PDF de la URL dada al archivo index.js. El siguiente código también muestra cómo agregar un gráfico generado por D3 la API que tendrá en la URL del usuario.

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

Recuerde definir el componente 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

Explicación del código:

1. Creamos una aplicación Next.js y añadimos los paquetes necesarios, IronPDF y D3.

2. A continuación, creamos el componente BarChart utilizando D3.

3. Añadir entrada y botón para generar el documento PDF.

Salidas

API:

PDF generado a partir de[uRL de IronPDF](/nodejs/)**:

Licencia IronPDF

EnLicencia de prueba de IronPDF permite a los usuarios comprobar sus amplias funciones antes de la compra. Encontrará más información sobre las licencias perpetuas en la páginaLicencia IronPDF página.

Coloque aquí la clave de licencia:

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"

Conclusión

Al combinar D3.js con React, puedes aprovechar los puntos fuertes de ambas bibliotecas para crear visualizaciones de datos potentes e interactivas. React proporciona un marco sólido para construir interfaces de usuario, mientras que D3.js ofrece amplias capacidades para la manipulación y visualización de datos. El uso de NPM para gestionar las dependencias garantiza el mantenimiento y la escalabilidad del proyecto. Este ejemplo de gráfico de barras sencillo es sólo el principio; con estas herramientas, puede crear una amplia variedad de visualizaciones de datos sofisticadas e interactivas adaptadas a sus necesidades específicas.