d3 NPM (Geliştiriciler İçin Nasıl Çalışır)
Veri görselleştirme, karmaşık veri setlerini anlaşılabilir ve uygulanabilir içgörüler haline getiren modern web geliştirmenin önemli bir unsurudur. Mevcut çeşitli araçlar ve kütüphaneler arasında, D3.js, veri uygulayıcıları arasında on yılı aşkın süredir dinamik ve etkileşimli grafikler oluşturmak için güçlü ve esnek bir yaklaşımı ile öne çıkıyor. D3.js'i, kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesi olan React ile birleştirerek sağlam, sürdürülebilir ve verimli veri görselleştirme uygulamaları oluşturabilirsiniz.
Bu makale, React ile D3.js entegrasyonunu ve veri görselleştirmenin nasıl yardımcı olabileceğini inceleyecektir. Ayrıca, web sitesi URL'lerinden PDF oluşturmak için IronPDF PDF oluşturma kütüphanesini de inceleyeceğiz.
D3.js Nedir?
D3.js, web tarayıcılarında dinamik, etkileşimli veri türevli grafik görselleştirmeleri oluşturmak için bir temel yapı bloğu olarak hareket eden bir JavaScript kütüphanesidir. HTML, SVG ve CSS kullanarak, çeşitli grafik ve çizelgeler aracılığıyla veriyi hayata geçirebilen D3, bir Belgeler Nesnesi Modeli'ne (DOM) veriyi bağlamak ve veritabanında veri yönlendirilmiş dönüşümler uygulamak için güçlü bir çerçeve sunar ve birçok üst düzey grafik kütüphanesinde temel olarak kullanılmaktadır.
React Nedir?
React, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir. Geliştiricilerin tekrar kullanılabilir UI bileşenleri oluşturmasına, durumu verimli bir şekilde yönetmesine ve veri değişikliklerine tepki olarak DOM'u güncelleyebilmesi sağlar.
Çevrenizi Kurma
Sisteminizde Node.js ve npm kurulu olduğundan emin olun. Değilse, resmi Node.js web sitesinden indirip yükleyebilirsiniz.
Adım 1: Yeni Bir React Uygulaması Oluşturun
Öncelikle, iyi bir varsayılan konfigürasyonla yeni bir React projesi kuran bir araç olan Create React App kullanarak yeni bir React uygulaması oluşturun. Bunu başarmak için terminalinizde şu komutları kullanabilirsiniz:
npx create-react-app d3-react-app
cd d3-react-appnpx create-react-app d3-react-app
cd d3-react-appAdım 2: D3.js Kurulumu
Sonraki adım olarak, aşağıdaki komutu kullanarak D3.js npm paketini kurun:
npm install d3npm install d3Basit Bir Çubuk Grafiği Oluşturma
D3.js'nin React ile nasıl kullanılacağını göstermek için, basit bir çubuk grafik oluşturacağız.
Adım 1: Bileşeni Kurun
Yeni bir bileşen oluşturun ve BarChart.js adını verin. src klasörüne yerleştirin ve bileşen için aşağıdaki kodu kullanın:
// 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;Adım 2: Bileşeni Kullanın
Şimdi, BarChart bileşenini App.js dosyanızda kullanın ve ona bazı veriler iletin.
// 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;Çıktı
IronPDF Tanıtımı
IronPDF, Node.js uygulamaları içinde PDF oluşturmayı kolaylaştırmak için tasarlanmış güçlü bir npm paketidir. HTML içeriklerinden, URL'lerden veya mevcut PDF dosyalarından PDF belgeleri oluşturmanın eşi benzeri olmayan esnekliğini sunar. Fatura, rapor veya başka belgeler oluştururken, IronPDF'in sezgisel API'si ve kapsamlı özellik seti ile süreç basitleştirilir.
IronPDF'nin Ana Özellikleri
HTML'den PDF Dönüştürme: Web içeriğinden dinamik PDF'ler oluşturmak için ideal olan HTML içeriğini kolayca PDF belgelerine dönüştürün.
URL'den PDF Dönüştürme: Web sayfalarının içeriğini yakalayarak ve programlı olarak onları PDF dosyası olarak kaydederek doğrudan URL'lerden PDF oluşturun.
PDF Manipülasyonu: Mevcut PDF belgelerini birleştirme, ayırma ve kolayca manipüle etme. IronPDF, sayfaları eklemenize, belgeleri ayırmanıza ve daha fazlasını yapmanıza olanak tanır.
PDF Güvenliği: PDF belgelerinizi parolalarla şifreleyerek veya dijital imzalar uygulayarak güvenli hale getirin, böylece hassas belgelerinize yetkisiz erişimi önleyin.
Yüksek Kaliteli Çıktı: Orijinal içeriğe sadık kalarak, metin, resimler ve formatlama ile yüksek kaliteli PDF belgeleri üretin.
Çapraz Platform Uyumluluğu: IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur ve geniş bir geliştirme ortamı için uygundur.
- Kolay Entegrasyon: IronPDF'i npm paketi ile Node.js uygulamalarınıza kolayca entegre edin. İyi belgelendirilmiş API, projeinizde PDF oluşturma yeteneklerini kolayca entegre etmenizi sağlar.
İster bir web uygulaması, ister sunucu tarafı script veya komut satırı aracı oluşturuyor olun, IronPDF, profesyonel düzeyde PDF belgelerini verimli ve güvenilir bir şekilde oluşturma yetkisi verir.
IronPDF ve D3 npm Paketi: PDF Oluşturmayı Kolaylaştırır
Bağımlılıkları Yükleyin: İlk önce yeni bir Next.js projesi (henüz yapmadıysanız) oluşturun ve aşağıdaki komutu kullanın:
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"Sonrasında, proje dizinine gidin:
cd d3charts-pdfcd d3charts-pdfSon olarak, gereken paketleri yükleyin:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3PDF Oluşturma API'si: İlk adım, PDF belgesini oluşturmak için bir arka plan API oluşturmak. IronPDF yalnızca sunucu tarafında çalıştığı için, kullanıcılar PDF oluşturmak istediğinde çağırmak için bir API oluşturmalıyız. pages/api/pdf.js yolunda bir dosya oluşturun ve aşağıdaki içeriği ekleyin:
// 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();
}
}IronPDF, üstteki kodda yerleştirilecek deneme lisans sayfasından bir lisans anahtarı gerektirir.
Kullanıcıdan bir URL kabul etmek ve ardından verilen URL'den index.js dosyasında bir PDF oluşturmak için aşağıdaki kodu ekleyin. Kod ayrıca D3 tarafından üretilen bir grafiğin nasıl ekleneceğini ve kullanıcının URL'sini alan bir backend API'nin nasıl oluşturulacağını gösterir.
// 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>
);
}D3BarChart bileşenini tanımlamayı unutmayın:
// 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>;
}Kod Açıklaması:
- Bir Next.js uygulaması oluşturuyoruz ve gerekli paketleri, IronPDF ve D3 ekliyoruz.
- Daha sonra D3 kullanarak BarChart bileşeni oluşturuyoruz.
- PDF belgesini oluşturmak için bir giriş ve buton ekliyoruz.
Çıktılar
API:
Bu [IronPDF URL'sinden](/nodejs/) oluşturulan PDF:
IronPDF Lisansı
IronPDF deneme lisansı, kullanıcıların satın almadan önce kapsamlı özelliklerini gözden geçirmelerine olanak tanır. Süresiz lisanslama hakkında daha fazla ayrıntı IronPDF Lisanslama sayfasında bulunabilir.
Lisans Anahtarını buraya yerleştirin:
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";Sonuç
D3.js'i React ile birleştirerek, her iki kütüphanenin güçlü yönlerinden yararlanabilir ve güçlü ve etkileşimli veri görselleştirmeleri oluşturabilirsiniz. React, kullanıcı arayüzleri oluşturmak için sağlam bir çerçeve sağlar, D3.js ise veri manipülasyonu ve görselleştirme için geniş bir yetenek seti sunar. Bağımlılıkları yönetmek için NPM kullanımı, projenizin sürdürülebilir ve ölçeklenebilir olmasını sağlar. Bu basit bir çubuk grafik örneği olsa da; bu araçlarla, belirli ihtiyaçlarınıza uyarlanmış çok çeşitli gelişmiş ve etkileşimli veri görselleştirmeleri oluşturabilirsiniz.
Ücretsiz Başlayın
Ücretsiz Başlayın
Ücretsiz Canlı Demo Rezervasyonu
Kredi kartı veya hesap oluşturma gerektirmez
