📋 محتويات الصفحة
📖 الوصف
D3.js (Data-Driven Documents) هي المكتبة الأساسية الأكثر قوة في عالم الرسوم البيانية. بدلاً من تقديم رسومات جاهزة، تقدم D3 primitives لبناء أي نوع من التصورات من الصفر باستخدام HTML, SVG, و CSS مع ربط البيانات بـ DOM. تعتمد عليها معظم المكتبات الأخرى (Recharts, Nivo, Visx) داخلياً. مثالية للمشاريع ...
🎯 يستخدم في
مجالات استخدام هذه الأداة
Custom data visualizations
Infographics تفاعلية
Data journalism
Advanced dashboards
Scientific visualizations
Geographic maps المعقدة
Network graphs
✨ المميزات
أبرز مميزات هذه الأداة
القوة المطلقة في التخصيص
30+ module (modular design)
SVG
Canvas
HTML rendering
DOM manipulation ذكي
Transitions &_animations سلسة
Geographic projections
Layouts (Tree
Treemap
Force
Chord)
Shapes & Curves
Scales (linear
log
time
ordinal)
Large community & ecosystem
Free & Open source (ISC)
⚠️ العيوب
نقاط يجب مراعاتها
Learning curve حاد جداً
Boilerplate كبير
غير مناسبة للمبتدئين
وقت تطوير طويل
No pre-built chart components
Documentation تحتاج خبرة
ليس framework (تحتاج knowledge عميق)
Performance تحتاج تحسين يدوي أحياناً
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
<!DOCTYPE html>
<html dir="rtl">
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg id="chart" width="600" height="400"></svg>
<script>
const data = [
{ month: 'يناير', value: 120 },
{ month: 'فبراير', value: 200 },
{ month: 'مارس', value: 150 },
{ month: 'أبريل', value: 280 },
];
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.select('#chart')
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// Scales
const x = d3.scaleBand()
.domain(data.map(d => d.month))
.range([0, width])
.padding(0.2);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.nice()
.range([height, 0]);
// Axes
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));
svg.append('g')
.call(d3.axisLeft(y));
// Bars with animation
svg.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', d => x(d.month))
.attr('width', x.bandwidth())
.attr('y', height)
.attr('height', 0)
.attr('fill', 'steelblue')
.transition()
.duration(800)
.attr('y', d => y(d.value))
.attr('height', d => height - y(d.value));
// Force-directed network
const nodes = [{ id: 'A' }, { id: 'B' }, { id: 'C' }];
const links = [{ source: 'A', target: 'B' }, { source: 'B', target: 'C' }];
const simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(links).id(d => d.id))
.force('charge', d3.forceManyBody().strength(-100))
.force('center', d3.forceCenter(width / 2, height / 2));
simulation.on('tick', () => {
// Update node/link positions
});
</script>
</body>
</html>📚 أدوات أخرى في Charts
قد يعجبك أيضاً
ApexCharts
⭐مكتبة رسوم بيانية JavaScript تفاعلية حديثة (Modern Interactive Charts)
Chart.js
⭐مكتبة رسوم بيانية JavaScript بسيطة وخفيفة (Simple yet Flexible JS Charts)
ECharts
⭐مكتبة رسوم بيانية JavaScript مفتوحة المصدر قوية (Powerful Interactive Charting Library)
Highcharts
⭐مكتبة رسوم بيانية JavaScript احترافية (Professional JavaScript Charts)
Nivo
⭐مكتبة رسوم بيانية React غنية بمكونات declarative (Rich Declarative Data Visualization)
Plotly
⭐مكتبة رسوم بيانية علمية متقدمة (Scientific & Advanced Charts)