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

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

Majd Muhtaseb03‏/09‏/202515 دقيقة

مقدمة

React و D3.js هما أداتان قويتان لإنشاء تصورات بيانات تفاعلية. يوفر React نهجًا تصريحيًا لإدارة واجهة المستخدم، بينما يوفر D3.js مرونة لا مثيل لها لمعالجة DOM استنادًا إلى البيانات. يتيح الجمع بينهما إنشاء تصورات عالية الأداء وقابلة للصيانة.

إعداد مشروعك

أولاً، قم بإنشاء مشروع React جديد باستخدام Create React App:

npx create-react-app react-d3-visualization
cd react-d3-visualization
npm install d3

إنشاء مخطط شريطي أساسي

لنبدأ بمخطط شريطي بسيط. قم بإنشاء مكون جديد باسم BarChart.js:

// BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const BarChart = ({ data, width = 600, height = 400 }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current)
      .attr("width", width)
      .attr("height", height);

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

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data, (d) => d.value)])
      .range([height, 0]);

    svg.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) => height - yScale(d.value))
      .attr("fill", "steelblue");
  }, [data, height, width]);

  return <svg ref={svgRef}></svg>;
};

export default BarChart;

استخدام المخطط الشريطي في App.js

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

// App.js
import React from 'react';
import BarChart from './BarChart';

const data = [
  { label: "A", value: 10 },
  { label: "B", value: 15 },
  { label: "C", value: 13 },
  { label: "D", value: 20 },
  { label: "E", value: 8 }
];

function App() {
  return (
    <div className="App">
      <h1>مخطط شريطي بسيط</h1>
      <BarChart data={data} />
    </div>
  );
}

export default App;

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

لجعل المخطط تفاعليًا، دعنا نضيف تلميح أداة يعرض قيمة كل شريط عند التمرير فوقه. قم بتعديل BarChart.js:

// BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const BarChart = ({ data, width = 600, height = 400 }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current)
      .attr("width", width)
      .attr("height", height);

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

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data, (d) => d.value)])
      .range([height, 0]);

    const tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0)
        .style("position", "absolute")
        .style("background-color", "white")
        .style("border", "solid")
        .style("border-width", "1px")
        .style("border-radius", "5px")
        .style("padding", "5px");

    svg.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) => height - yScale(d.value))
      .attr("fill", "steelblue")
      .on("mouseover", (event, d) => {
        tooltip.transition()
          .duration(200)
          .style("opacity", .9);
        tooltip.html("القيمة: " + d.value)
          .style("left", (event.pageX) + "px")
          .style("top", (event.pageY - 28) + "px");
      })
      .on("mouseout", (event, d) => {
        tooltip.transition()
          .duration(500)
          .style("opacity", 0);
      });

  }, [data, height, width]);

  return <svg ref={svgRef}></svg>;
};

export default BarChart;

أضف CSS التالي إلى ملف App.css الخاص بك:

/* App.css */
.tooltip {
  font-family: sans-serif;
  font-size: 12px;
}

خاتمة

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