العودة للمقالات

بناء تصورات بيانات تفاعلية باستخدام Svelte و D3.js

المؤلفMajd Muhtaseb14‏/05‏/202512 دقيقة
بناء تصورات بيانات تفاعلية باستخدام 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} />

شرح

  1. استيراد المكتبات الضرورية: نقوم باستيراد d3 و onMount من Svelte.
  2. تعريف الخصائص (props): تسمح الخصائص data و width و height و margin بتخصيص المخطط.
  3. دورة الحياة onMount: تضمن الدالة onMount تشغيل كود D3.js بعد تحميل المكون في DOM.
  4. المقاييس: نقوم بتعريف xScale و yScale لتعيين قيم البيانات إلى مواقع البكسل.
  5. عنصر SVG: نقوم بإنشاء عنصر SVG وإلحاق مجموعة (g) به للمخطط.
  6. الأشرطة: نقوم بإنشاء الأشرطة باستخدام selectAll و data و enter و append.
  7. المحاور: نضيف محاور x و y باستخدام d3.axisBottom و d3.axisLeft.

إضافة التفاعلية

يمكنك إضافة تفاعلية باستخدام إمكانيات معالجة الأحداث في Svelte. على سبيل المثال ، يمكنك إضافة تلميح أداة لعرض قيمة كل شريط عند التمرير فوقه.

خاتمة

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