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 (Data-Driven Documents) se destaca por su enfoque poderoso y flexible para crear gráficos dinámicos e interactivos durante más de una década entre los profesionales de 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 la biblioteca de generación de PDF IronPDF para generar PDFs a partir de URLs de sitios web.

¿Qué es D3.js?

D3.js es una biblioteca de JavaScript que actúa como un bloque de construcción fundamental para producir visualizaciones de gráficos dinámicos e interactivos basados en datos en navegadores web. Utiliza HTML, SVG y CSS para dar vida a los datos mediante varios tipos de gráficos y tablas. D3 proporciona un marco poderoso para vincular datos a un Modelo de Objeto de Documento (DOM) y aplicar transformaciones impulsadas por 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, puede descargarlos e instalarlos desde el sitio web oficial de 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

Paso 2: Instalar D3.js

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

npm install d3

npm install d3

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

Crea un nuevo componente llamado BarChart.js en la carpeta src, y usa 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;

js

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;

js

Salida

Presentación de IronPDF

IronPDF es un paquete npm robusto diseñado para facilitar la generación de PDF dentro de aplicaciones de 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: Convierte fácilmente contenido HTML en documentos PDF, ideal para generar PDFs dinámicos a partir de contenido web.

Conversión de URL a PDF: Crea PDFs directamente desde URLs, capturando el contenido de las páginas web y guardándolas como archivos PDF de manera programática.

Manipulación de PDF: Fusiona, divide y manipula 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 sensibles del acceso no autorizado.

Salida de Alta Calidad: Produce documentos PDF de alta calidad con una representación precisa de texto, imágenes y formato, asegurando la fidelidad al contenido original.

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

Integración sencilla: Integra fácilmente IronPDF en tus aplicaciones de 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 de Next.js (si aún no lo has hecho) usando 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"

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

cd d3charts-pdf

cd d3charts-pdf

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

API de Generación de PDF: El primer paso es crear una API de 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();
    }
}

js

IronPDF requiere una clave de licencia, obténgala en la página de licencia de prueba y colóquela 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>
  );
};

js

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

js

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 desde este [URL de IronPDF](/nodejs/):

Licencia IronPDF

La licencia de prueba de IronPDF permite a los usuarios probar sus extensas características antes de la compra. Más detalles sobre la licencia perpetua se pueden encontrar en la página de IronPDF Licensing.

Coloque aquí la clave de licencia:

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

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.