ReactJS で独自のインタラクティブな折れ線グラフを構築する

基本的な SVG コンポーネント

まず、幅と高さを小道具として受け入れる単純な SVG コンポーネントを作成しましょう。これがグラフの開始点になります。

import React from "react";

const LineGraph = ({ height, width }) => {
  return <svg height={height} width={width}></svg>;
};

export default LineGraph;

X軸の追加

次に、グラフを水平に走る X 軸を追加しましょう。 を使用します。この要素。

const drawXAxis = () => {
  const middleY = height / 2;

  return (
    <line x1={0} y1={middleY} x2={width} y2={middleY} stroke={lineColor} />
  );
};

Y軸の追加

別の を使用します。 Y 軸を描画する要素。グラフの中心を垂直に通過します。

const drawYAxis = () => {
  const middleX = width / 2;

  return (
    <line x1={middleX} y1={0} x2={middleX} y2={height} stroke={lineColor} />
  );
};

座標をラインパスとしてプロットする

折れ線グラフの重要な部分は、異なる点を結ぶ線です。いくつかのサンプル座標をプロットし、SVG を使用してそれらを接続しましょう。

const drawPath = () => {
    const pathData = coordinates
      .map((coordinate, index) =>
        index === 0
          ? `M ${coordinate.x} ${coordinate.y}`
          : `L ${coordinate.x} ${coordinate.y}`
      )
      .join(" ");

    return <path d={pathData} stroke={pathColor} fill="none" />;
  };

線の下の領域を塗りつぶすオプション

グラフを強調するために、線の下の領域を色で塗りつぶすことができます。これは追加要素を使用して実行できます。この領域を表示/非表示にするためのプロパティ isFillArea を検討してください。

const drawPath = () => {
  const pathData = coordinates
    .map((coordinate, index) =>
      index === 0
        ? `M ${coordinate.x} ${coordinate.y}`
        : `L ${coordinate.x} ${coordinate.y}`
    )
    .join(" ");

  const middleY = height / 2;
  const svgPath = showFillArea
    ? `${pathData} L ${width} ${middleY} L 0 ${middleY} Z`
    : pathData;
  const fillColor = showFillArea ? areaColor : "none";
  return (
    <path d={svgPath} fill={fillColor} stroke={pathColor} opacity="0.5" />
  );
};

カーソルの追跡

グラフ パス上のカーソルの動きに従う円を追加しましょう。

SVG 要素の境界ボックスにアクセスするには、SVG コンポーネントの参照が必要です。また、グラフ上のカーソルを追跡するために使用される追跡円の参照でもあります。

const svgRef = useRef();
const circleRef = useRef();
// ...
const drawTrackingCircle = () => {
  return (
    <circle
      ref={circleRef}
      r={6}
      fill="red"
      style={{ display: "none" }} // Initially hidden
    />
  );
};
// ...
<svg ref={svgRef} width={width} height={height}>
// ...
</svg>

次に、SVG 要素にイベント リスナーを追加する必要があります。これにより、グラフ上のすべてのカーソルの動きが監視されます。

useEffect(() => {
  const svgElement = svgRef.current;
  svgElement.addEventListener("mousemove", handleMouseMove);

  // clean up
  return () => svgElement.removeEventListener("mousemove", handleMouseMove);
}, []);

次に、カーソル位置とパスの交点座標を見つけるメソッドが必要です。

const getIntersectionPoint = (cursorX) => {
  // Find the segment (p1, p2) where cursorX lies between two consecutive coordinates.
  const segment = coordinates.find((p1, i) => {
    // Get the next point
    const p2 = coordinates[i + 1]; 
    // Check if cursorX falls between the two coordinates horizontally.
    return (
      p2 &&
      ((p1.x <= cursorX && p2.x >= cursorX) ||
        (p1.x >= cursorX && p2.x <= cursorX))
    );
  });

  // Return null if no valid segment is found.
  if (!segment) return null; 

  // Destructure the two coordinates in the segment.
  const [p1, p2] = [segment, coordinates[coordinates.indexOf(segment) + 1]];

  // Calculate 't' to determine the relative position between p1 and p2.
  const t = (cursorX - p1.x) / (p2.x - p1.x);

  // Interpolate the Y-coordinate using 't'.
  const y = p1.y + t * (p2.y - p1.y);

  return { x: cursorX, y };
};

カーソル移動追跡メソッド。 getIntersectionPoint メソッドを使用して、現在の交差点の座標を見つけます。

const handleMouseMove = (event) => {
  // Get SVG position
  const svgRect = svgRef.current.getBoundingClientRect();
  // Calculate cursor's X within the SVG
  const cursorX = event.clientX - svgRect.left;

  // Find the intersection point
  const intersectionPoint = getIntersectionPoint(cursorX);
  if (intersectionPoint) {
    // Move the intersection circle to the calculated point
    circleRef.current.setAttribute("cx", intersectionPoint.x);
    circleRef.current.setAttribute("cy", intersectionPoint.y);
    circleRef.current.style.display = "block";
  }
};

最後に、これがグラフ コンポーネントの構造になります

return (
  <svg ref={svgRef} height={height} width={width}>
    {drawPath()}
    {drawXAxis()}
    {drawYAxis()}
    {drawTrackingCircle()}
    {drawDataPointCircles()}
  </svg>
);

これがグラフコンポーネントの使用方法です

<LineGraph
  width={300}
  height={400}
  coordinates={samplePoints}
  lineColor="#000"
  pathColor="#00008B"
  areaColor="#ADD8E6"
  dataPointColor="#008000"
  showFillArea
  showDataPointCircle
/>

LineGraph デモのコードサンドボックス リンク

Unsplash の Isaac Smith によるブログ写真

読んでいただきありがとうございます❤

以上がReactJS で独自のインタラクティブな折れ線グラフを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。