بناء تصورات بيانات تفاعلية باستخدام Svelte و D3.js
مقدمة
تُعد Svelte و D3.js مزيجًا قويًا لإنشاء تصورات بيانات تفاعلية. توفر Svelte نهجًا قائمًا على المكونات لبناء واجهات المستخدم، بينما تقدم D3.js مجموعة شاملة من الأدوات لمعالجة DOM وإنشاء رسومات ديناميكية. توضح هذه المقالة كيفية دمج هاتين التقنيتين لإنشاء تصورات مقنعة.
تجهيز مشروعك
أولاً، قم بإنشاء مشروع Svelte جديد:
npx degit sveltejs/template my-svelte-d3-app
cd my-svelte-d3-app
npm install
npm install d3
إنشاء مخطط شريطي بسيط
دعنا ننشئ مخططًا شريطيًا أساسيًا باستخدام D3.js داخل مكون Svelte.
src/lib/BarChart.svelte
:
<script>
import * as d3 from 'd3';
import { onMount } from 'svelte';
export let data;
export let width = 600;
export let height = 400;
export let margin = { top: 20, right: 30, bottom: 40, left: 50 };
let svg;
onMount(() => {
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const xScale = d3.scaleBand()
.domain(data.map(d => d.label))
.range([0, innerWidth])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([innerHeight, 0]);
const g = d3.select(svg)
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
g.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', d => xScale(d.label))
.attr('y', d => yScale(d.value))
.attr('width', xScale.bandwidth())
.attr('height', d => innerHeight - yScale(d.value))
.attr('fill', 'steelblue');
g.append('g')
.attr('transform', `translate(0,${innerHeight})`)
.call(d3.axisBottom(xScale));
g.append('g')
.call(d3.axisLeft(yScale));
});
</script>
<svg bind:this={svg}></svg>
<style>
.bar {
stroke: none;
}
</style>
src/routes/+page.svelte
:
<script>
import BarChart from '$lib/BarChart.svelte';
const data = [
{ label: 'A', value: 20 },
{ label: 'B', value: 35 },
{ label: 'C', value: 30 },
{ label: 'D', value: 45 },
{ label: 'E', value: 10 }
];
</script>
<BarChart {data} />
شرح
- استيراد المكتبات الضرورية: نقوم باستيراد
d3
وonMount
من Svelte. - تعريف الخصائص (props): تسمح الخصائص
data
وwidth
وheight
وmargin
بتخصيص المخطط. - دورة الحياة
onMount
: تضمن الدالةonMount
تشغيل كود D3.js بعد تحميل المكون في DOM. - المقاييس: نقوم بتعريف
xScale
وyScale
لتعيين قيم البيانات إلى مواقع البكسل. - عنصر SVG: نقوم بإنشاء عنصر SVG وإلحاق مجموعة (
g
) به للمخطط. - الأشرطة: نقوم بإنشاء الأشرطة باستخدام
selectAll
وdata
وenter
وappend
. - المحاور: نضيف محاور x و y باستخدام
d3.axisBottom
وd3.axisLeft
.
إضافة التفاعلية
يمكنك إضافة تفاعلية باستخدام إمكانيات معالجة الأحداث في Svelte. على سبيل المثال ، يمكنك إضافة تلميح أداة لعرض قيمة كل شريط عند التمرير فوقه.
خاتمة
تقدم هذه المقالة مقدمة أساسية لإنشاء تصورات بيانات باستخدام Svelte و D3.js. يمكنك توسيع هذا المثال لإنشاء تصورات أكثر تعقيدًا وتفاعلية من خلال استكشاف واجهة برمجة تطبيقات D3.js الشاملة وميزات Svelte التفاعلية.