d3 NPM (Geliştiriciler İçin Nasıl Çalışır)
Veri görselleştirmesi, karmaşık veri setlerini anlaşılabilir ve uygulanabilir içgörülere dönüştürerek modern web geliştirmede kritik bir faktördür. Mevcut çeşitli araçlar ve kütüphaneler arasında, D3.js ((Data-Driven Documents), veri pratisyenleri arasında on yılı aşkın süredir dinamik ve etkileşimli grafikler oluşturmak için güçlü ve esnek yaklaşımıyla öne çıkar. D3.js'i, kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesi olan React ile birleştirdiğinizde sağlam, sürdürülebilir ve verimli veri görselleştirme uygulamaları oluşturabilirsiniz.
Bu makale, D3.js'in React ile entegrasyonunu ve veri görselleştirmesine nasıl yardımcı olabileceğini size rehberlik edecek. Ayrıca, web sitesi URL'lerinden PDF oluşturmak için IronPDF PDF oluşturma kütüphanesine bakacağız.
D3.js Nedir?
D3.js, web tarayıcılarında dinamik, etkileşimli veri güdümlü grafik görselleştirmeleri üretmek için temel bir yapı taşı olarak hareket eden bir JavaScript kütüphanesidir. HTML, SVG ve CSS kullanarak verileri canlandırmak için çeşitli grafik türleri sağlar. D3, veri nesnelerini bir Belge Nesne Modeli'ne (DOM) bağlamak ve belgenin veri güdümlü dönüşümlerini uygulamak için güçlü bir çerçeve sunar ve birçok üst düzey grafik kütüphanesinde temel olarak kullanılır.
React Nedir?
React, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir. Geliştiricilere yeniden kullanılabilir UI bileşenleri oluşturmalarına, durumu verimli bir şekilde yönetmelerine ve veri değişimlerine yanıt olarak DOM'u güncellemelerine olanak tanır.
Ortamınızı Ayarlama
Sisteminizde Node.js ve npm'nin yüklü olduğundan emin olun. Değilse, resmi Node.js web sitesinden indirebilir ve kurabilirsiniz.
Adım 1: Yeni Bir React Uygulaması Yaratma
Öncelikle, iyi bir varsayılan yapılandırma ile yeni bir React projesi kuran Create React App kullanarak yeni bir React uygulaması oluşturun. Terminalinizde aşağıdaki komutları kullanarak bunu gerçekleştirebilirsiniz:
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'i Yükleme
Sonra, aşağıdaki komutla D3.js npm paketini yükleyin:
npm install d3npm install d3Basit Bir Çubuk Grafiği Oluşturma
D3.js'i React ile nasıl kullanabileceğimizi göstermek için basit bir çubuk grafik oluşturacağız.
Adım 1: Bileşeni Kurun
Yeni bir bileşen oluşturun BarChart.js adlı src klasöründe 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 Kullanma
Ş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'i Tanıtma
IronPDF, Node.js uygulamalarında PDF oluşturma işlemini kolaylaştırmak için tasarlanmış sağlam bir npm paketidir. HTML içeriğinden, URL'lerden veya mevcut PDF dosyalarından PDF belgeleri oluştururken benzersiz esneklik sağlar. İster faturalar, raporlar veya diğer belgeler oluşturuyor olun, IronPDF, sezgisel API'si ve kapsamlı özellik seti ile süreci kolaylaştırır.
IronPDF'in Temel Özellikleri
HTML'den PDF'ye Dönüşüm: Web içeriğinden dinamik PDF'ler oluşturmak için ideal olan, HTML içeriğini zahmetsizce PDF belgelerine dönüştürün.
URL'den PDF'ye Dönüşüm: Web sayfalarının içeriğini yakalayarak ve PDF dosyalarını programatik olarak kaydederek doğrudan URL'lerden PDF'ler oluşturun.
PDF Manipülasyonu: Mevcut PDF belgelerini kolayca birleştirin, bölün ve manipüle edin. IronPDF, sayfaları eklemenize, belgeleri bölmenize ve daha fazlasına olanak tanır.
PDF Güvenliği: PDF belgelerinizi, onları yetkisiz erişimden koruyan parolalarla şifreleyerek veya dijital imzalar uygulayarak güvence altına alın.
Yüksek Kaliteli Çıktı: Metin, görüntüler ve biçimlendirilmenin hassas şekilde render edilmesiyle orijinal içeriğe sadık, 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ı yelpazesi için uygundur.
- Basit Entegrasyon: IronPDF'i npm paketi ile kolayca Node.js uygulamalarınıza entegre edin. - Well-documented API ile projelerinize PDF oluşturma yeteneklerini eklemek son derece kolaydır.
İster bir web uygulaması, ister bir sunucu tarafı script, ister bir komut satırı aracı geliştiriyor olun, IronPDF kaliteli PDF belgelerini hızlı ve güvenilir bir şekilde oluşturmanızı sağlar.
IronPDF ve D3 npm Paketi: PDF Oluşturmayı Kolaylaştırıyor
Bağımlılıkları Kurun: İlk olarak, aşağıdaki komutu kullanarak yeni bir Next.js projesi oluşturun (henüz yapmadıysanız):
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"Sonra, proje dizininize gidin:
cd d3charts-pdfcd d3charts-pdfSon olarak, gerekli 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şturacak bir arka uç API'si yaratmaktır. IronPDF yalnızca sunucu tarafında çalıştığından, kullanıcılar PDF oluşturmak istediklerinde çağırılacak 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, deneme lisans sayfasından alabileceğiniz ve yukarıdaki koda yerleştirmeniz gereken bir lisans anahtarı gerektirir.
Kullanıcıdan bir URL kabul etmek ve verilen URL'den bir PDF oluşturmak için aşağıdaki kodu index.js dosyasına ekleyin. Kod ayrıca, kullanıcıdan alınan URL'yi bir D3 tarafından üretilen grafik ve bir arka uç API'si aracılığıyla nasıl ekleyebileceğinizi 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ştururuz ve gerekli paketleri, IronPDF ve D3, ekleriz.
- Ardından, D3 kullanarak BarChart bileşenini oluştururuz.
- PDF belgesi oluşturmak için bir input ve buton ekleyin.
Çıkış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 kontrol etmelerini sağlar. 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, güçlü ve etkileşimli veri görselleştirmeleri oluşturmak için her iki kütüphanenin de avantajlarından faydalanabilirsiniz. React, kullanıcı arayüzleri oluşturmak için sağlam bir çerçeve sunarken, D3.js veri manipülasyonu ve görselleştirme için geniş yetenekler sağlar. Projenizin sürdürülebilir ve ölçeklenebilir olmasını sağlamada NPM'i kullanarak bağımlılıkları yönetmek önemlidir. Bu basit çubuk grafiği örneği sadece bir başlangıçtır; bu araçlarla, sizin özel ihtiyaçlarınıza yönelik çeşitli sofistike ve etkileşimli veri görselleştirmeleri oluşturabilirsiniz.
Ücretsiz başlamak için
Ücretsiz başlamak için
Ücretsiz Canlı Demo Rezervasyonu Yapın
Kredi kartı veya hesap oluşturma gerekli değil
