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

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

Majd Muhtaseb18‏/09‏/20257 دقيقة

مقدمة

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

إعداد مشروع Svelte الخاص بك

أولاً ، تأكد من إعداد مشروع Svelte الخاص بك. إذا لم يكن كذلك ، قم بإنشاء واحد باستخدام:

npx degit sveltejs/template my-svelte-d3-project
cd my-svelte-d3-project
npm install
npm install d3
npm run dev

إنشاء مكون الرسم البياني الشريطي

قم بإنشاء مكون Svelte جديد ، BarChart.svelte:

<script>
  import { onMount } from 'svelte';
  import * as d3 from 'd3';

  export let data;
  export let width = 600;
  export let height = 400;
  export let margin = { top: 20, right: 30, bottom: 40, left: 40 };

  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]);

    svg = d3.select('#bar-chart')
      .attr('width', width)
      .attr('height', height);

    const g = svg.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>

<style>
  .bar {
    transition: fill 0.3s ease;
  }

  .bar:hover {
    fill: orange;
    cursor: pointer;
  }
</style>

<svg id="bar-chart"></svg>

دمج المكون

في App.svelte الخاص بك ، قم باستيراد واستخدام مكون BarChart:

<script>
  import BarChart from './BarChart.svelte';

  const data = [
    { label: 'A', value: 20 },
    { label: 'B', value: 35 },
    { label: 'C', value: 30 },
    { label: 'D', value: 45 },
    { label: 'E', value: 25 }
  ];
</script>

<main>
  <h1>الرسم البياني الشريطي التفاعلي</h1>
  <BarChart {data} />
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
  }
</style>

شرح

• استيراد المكتبات الضرورية: استورد onMount من Svelte و d3 من D3.js.
• ربط البيانات: يسمح لك الدعامه data بتمرير البيانات إلى المكون.
• إعداد D3.js: داخل onMount ، نستخدم D3.js لإنشاء المقاييس والمحاور والأشرطة.
• التحويم التفاعلي: توفر أنماط CSS ملاحظات مرئية عند التحويم.

خاتمة

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