d3 NPM (Como funciona para desenvolvedores)
A visualização de dados é um aspecto crucial do desenvolvimento web moderno, ajudando a transformar conjuntos de dados complexos em informações compreensíveis e acionáveis. Dentre as diversas ferramentas e bibliotecas disponíveis, o D3.js (Data-Driven Documents) se destaca há mais de uma década entre os profissionais de dados por sua abordagem poderosa e flexível na criação de gráficos dinâmicos e interativos. Você pode criar aplicativos de visualização de dados robustos, fáceis de manter e eficientes ao combinar D3.js com React, uma biblioteca JavaScript popular para construção de interfaces de usuário.
Este artigo irá orientá-lo na integração do D3.js com o React e como isso pode ajudar na visualização de dados. Além disso, vamos analisar a biblioteca IronPDF para geração de PDFs a partir de URLs de sites.
O que é D3.js?
D3.js é uma biblioteca JavaScript que atua como um bloco de construção fundamental para produzir visualizações gráficas dinâmicas e interativas baseadas em dados em navegadores da web. Ele usa HTML, SVG e CSS para dar vida aos dados por meio de vários tipos de gráficos e tabelas. O D3 fornece uma estrutura poderosa para vincular dados a um Modelo de Objeto de Documento (DOM) e aplicar transformações orientadas a dados ao documento, sendo usado como base em muitas bibliotecas de gráficos de nível superior.
O que é React?
React é uma biblioteca JavaScript de código aberto criada pelo Facebook. Permite aos desenvolvedores criar componentes de interface do usuário reutilizáveis, gerenciar o estado de forma eficiente e atualizar o DOM em resposta a mudanças nos dados.
Preparando seu ambiente
Certifique-se de que o Node.js e o npm estejam instalados em seu sistema. Caso contrário, você pode baixá-los e instalá-los no site oficial do Node.js
Passo 1: Criar um novo aplicativo React
Primeiro, crie um novo aplicativo React usando o Create React App, uma ferramenta que configura um novo projeto React com uma boa configuração padrão. Você pode usar os seguintes comandos no seu terminal para realizar isso:
npx create-react-app d3-react-app
cd d3-react-appnpx create-react-app d3-react-app
cd d3-react-appPasso 2: Instale o D3.js
Em seguida, instale o pacote npm D3.js através do seguinte comando:
npm install d3npm install d3Criando um gráfico de barras simples
Para demonstrar como usar o D3.js com React, criaremos um gráfico de barras simples.
Passo 1: Configurar o componente
Crie um novo componente chamado BarChart.js na pasta src e use o seguinte código para o componente:
// 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;Etapa 2: Utilize o componente
Agora, use o componente BarChart no seu arquivo App.js e passe alguns dados para ele.
// 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;Saída
Apresentando o IronPDF
IronPDF é um pacote npm robusto projetado para facilitar a geração de PDFs em aplicações Node.js Isso possibilita uma flexibilidade incomparável na criação de documentos PDF a partir de conteúdo HTML, URLs ou arquivos PDF existentes. Seja para gerar faturas, relatórios ou outros documentos, o IronPDF simplifica o processo com sua API intuitiva e amplo conjunto de recursos.
Principais características do IronPDF
-
Conversão de HTML para PDF: Converta conteúdo HTML em documentos PDF sem esforço, ideal para gerar PDFs dinâmicos a partir de conteúdo da web.
-
Conversão de URL para PDF: Crie PDFs diretamente a partir de URLs, capturando o conteúdo de páginas da web e salvando-os como arquivos PDF programaticamente.
-
Manipulação de PDF: Combine, divida e manipule documentos PDF existentes com facilidade. O IronPDF permite adicionar páginas, dividir documentos e muito mais.
-
Segurança de PDF: Proteja seus documentos PDF criptografando-os com senhas ou aplicando assinaturas digitais, protegendo seus documentos confidenciais contra acesso não autorizado.
-
Saída de alta qualidade: Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e formatação, garantindo fidelidade ao conteúdo original.
-
Compatibilidade multiplataforma: O IronPDF é compatível com diversas plataformas, incluindo Windows, Linux e macOS, tornando-o adequado para uma ampla gama de ambientes de desenvolvimento.
- Integração simples: Integre facilmente o IronPDF em seus aplicativos Node.js usando seu pacote npm. A API bem documentada facilita a incorporação de recursos de geração de PDF em seus projetos.
Seja para criar um aplicativo web, um script do lado do servidor ou uma ferramenta de linha de comando, o IronPDF permite que você crie documentos PDF de nível profissional de forma eficiente e confiável.
Pacote IronPDF e D3 npm: Geração de PDFs facilitada
Instale as dependências: Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte 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"Em seguida, navegue até o diretório do seu projeto:
cd d3charts-pdfcd d3charts-pdfPor fim, instale os pacotes necessários:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3API de geração de PDF: O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidor, precisamos criar uma API para ser chamada quando os usuários quiserem gerar PDFs. Crie um arquivo no caminho pages/api/pdf.js e adicione o conteúdo abaixo:
// 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();
}
}O IronPDF requer uma chave de licença, que você pode obter na página de licença de avaliação e inserir no código acima.
Adicione o seguinte código para aceitar uma URL do usuário e, em seguida, gerar um PDF a partir da URL fornecida no arquivo index.js. O código também mostra como adicionar um gráfico gerado por D3 e uma API de backend que receberá a URL do usuário.
// 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>
);
}Lembre-se de definir o componente 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>;
}Explicação do código:
- Criamos um aplicativo Next.js e adicionamos os pacotes necessários, IronPDF e D3.
- Em seguida, criamos o componente BarChart usando D3.
- Adicione um campo de entrada e um botão para gerar o documento PDF.
Saídas
API:
PDF gerado a partir deste URL do IronPDF :
Licença IronPDF
A licença de avaliação do IronPDF permite que os usuários experimentem seus diversos recursos antes de comprá-la. Mais detalhes sobre o licenciamento perpétuo podem ser encontrados na página de Licenciamento do IronPDF .
Insira a chave de licença aqui:
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";Conclusão
Ao combinar D3.js com React, você pode aproveitar os pontos fortes de ambas as bibliotecas para criar visualizações de dados poderosas e interativas. O React fornece uma estrutura robusta para a construção de interfaces de usuário, enquanto o D3.js oferece amplas capacidades para manipulação e visualização de dados. Utilizar o NPM para gerenciar dependências garante que seu projeto seja sustentável e escalável. Este exemplo de um gráfico de barras simples é apenas o começo; Com essas ferramentas, você pode criar uma ampla variedade de visualizações de dados sofisticadas e interativas, adaptadas às suas necessidades específicas.
Comece GRATUITAMENTE
Comece GRATUITAMENTE
Agende uma demonstração ao vivo gratuita
Não é necessário cartão de crédito nem criação de conta.
