150- دروس جافا سكربت – JS D3.js

## مقدمة إلى D3.js في JavaScript

D3.js، والتي ترمز إلى Data-Driven Documents، هي مكتبة JavaScript قوية تُستخدم لإنشاء تصورات بيانات ديناميكية وتفاعلية لمواقع الويب. تُساعد هذه المكتبة المطورين على ربط البيانات بالـ DOM (Document Object Model) وتطبيق تحويلات البيانات على المستندات. تتفوق D3.js في تقديم أدوات مرنة لبناء الرسوم البيانية والمخططات [شركة برمجة مصرية] بطريقة متطورة تتيح للمطورين التحكم الكامل في التفاصيل المرئية.

## لماذا نستخدم D3.js؟

1. **التخصيص العالي**: توفر D3.js القدرة على تخصيص كل عنصر من عناصر الرسوم البيانية. يمكنك التحكم في الألوان، الأحجام، الأشكال، والتحركات بطريقة دقيقة.

2. **التفاعل الديناميكي**: تدعم D3.js التفاعل مع المستخدم من خلال الأحداث مثل النقر، والتحويم، والسحب. يمكنك إنشاء رسوم بيانية تتفاعل مع المستخدم بشكل سلس.

3. **التكامل مع معايير الويب**: تعتمد D3.js على معايير الويب مثل HTML، وCSS، وSVG، مما يجعل من السهل دمجها في تطبيقات الويب المختلفة.

## أمثلة عملية

### المثال الأول: إنشاء مخطط شريطي بسيط

لنبدأ بمثال بسيط لإنشاء مخطط شريطي باستخدام D3.js. [شركة برمجة مصرية] سنقوم بإنشاء مجموعة بسيطة من البيانات وتمثيلها بصريًا.

“`html

.bar {
fill: steelblue;
}

const data = [30, 86, 168, 281, 303, 365];

const svg = d3.select(“svg”);
const width = +svg.attr(“width”);
const height = +svg.attr(“height”);

const x = d3.scaleBand()
.domain(data.map((d, i) => i))
.range([0, width])
.padding(0.1);

const y = d3.scaleLinear()
.domain([0, d3.max(data)])
.nice()
.range([height, 0]);

svg.selectAll(“.bar”)
.data(data)
.enter().append(“rect”)
.attr(“class”, “bar”)
.attr(“x”, (d, i) => x(i))
.attr(“y”, y)
.attr(“width”, x.bandwidth())
.attr(“height”, d => height – y(d));

“`

### المثال الثاني: إنشاء مخطط دائري

المخططات الدائرية هي طريقة ممتازة لعرض البيانات النسبية. هنا سنقوم بإنشاء مخطط دائري باستخدام D3.js.

“`html

const data = [10, 20, 30, 40];

const svg = d3.select(“svg”);
const width = +svg.attr(“width”);
const height = +svg.attr(“height”);
const radius = Math.min(width, height) / 2;

const g = svg.append(“g”)
.attr(“transform”, `translate(${width / 2},${height / 2})`);

const color = d3.scaleOrdinal(d3.schemeCategory10);

const pie = d3.pie();

const arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);

const arcs = g.selectAll(“.arc”)
.data(pie(data))
.enter().append(“g”)
.attr(“class”, “arc”);

arcs.append(“path”)
.attr(“d”, arc)
.attr(“fill”, d => color(d.data));

“`

## الختام

D3.js هي مكتبة قوية ومفيدة للغاية لأي مطور يرغب في إنشاء تصورات بيانات مخصصة وتفاعلية. من خلال أمثلة بسيطة مثل المخططات الشريطية والدائرية، يمكنك البدء في فهم كيفية عمل D3.js. بالتعمق أكثر في المكتبة، ستجد العديد من الطرق لتخصيص وتحسين تصورات البيانات الخاصة بك لتناسب احتياجات مشروعك.