如何放大 React Native D3.js 图表

Question

我正在尝试将 D3.js 库与 React Native 一起使用。然而，我设法渲染了一个 D3 折线图，但现在我需要在我的图表上添加缩放事件。我无法添加缩放功能，所以我认为最好咨询社区。

简单地说，我正在渲染一个没有花哨功能的图表。

这是我为构建 D3 折线图而编写的代码。这基本上是一个组件，我在其中调用 app.js 并在 app.js 上提供填充作为道具。

import React, { useEffect, useState } from "react";
import { View, Dimensions } from "react-native";
import * as d3 from "d3";
import { Line, G, Text, Svg, Path } from "react-native-svg";
import { multiFormat, nFormatter } from "./GlobalLibrary";
import { getTimeSeriesData } from "./Adata";

const BasicLineChart = ({ paddings }) => {
  const [svgSize, setSvgSize] = useState({ height: 0, width: 0 });
  const [linePathD, setLinePathD] = useState(null);
  const [xAxisTicks, setXAxisTicks] = useState([]);
  const [yAxisTicks, setYAxisTicks] = useState([]);
  // const [xScale, setXScale] = useState(null);
  // const [yScale, setYScale] = useState(null);
  const [realPaddings, setRealPaddings] = useState({
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    xAxisPadding: 0,
  });

  const { width, height } = Dimensions.get("window");
  let newRealPaddings = { ...paddings };
  if (!newRealPaddings.top) {
    newRealPaddings = {
      top: height / 5,
      left: width / 5,
      bottom: height / 5,
      right: width / 5,
    };
  }

  const data = getTimeSeriesData();

  const xScale = d3
    .scaleTime()
    .domain([data[0].time, data.at(-1).time])
    .range([newRealPaddings.left, width - newRealPaddings.right]);

  const maximumValue = Math.max(...data.map(({ value }) => value), 0);
  const minimumValue = Math.min(...data.map(({ value }) => value), 0);

  const yScale = d3
    .scaleLinear()
    .domain([minimumValue, maximumValue])
    .range([height - newRealPaddings.top, newRealPaddings.bottom]);

  const lineFunc = d3
    .line()
    .x(function (d) {
      return xScale(d.time);
    })
    .y(function (d) {
      return yScale(d.value);
    })
    .curve(d3.curveMonotoneX);

  console.log(lineFunc);

  useEffect(() => {
    setSvgSize({ height: height, width: width });

    newRealPaddings.xAxisPadding = newRealPaddings.bottom - 5;
    setRealPaddings(newRealPaddings);

    setLinePathD(lineFunc(data));

    setXAxisTicks(xScale.ticks(5));
    setYAxisTicks(yScale.ticks(5).filter((yAxisTick) => yAxisTick > 0));
  }, []);

  return (
    <Svg height={svgSize.height} width={svgSize.width}>
      <G>
        <Path d={linePathD} stroke="blue" fill="none" />
        <G
          transform={`translate(0,${
            svgSize.height - realPaddings.xAxisPadding
          })`}
        >
          {xAxisTicks.map((element, index) => {
            const xPoint = xScale(element);
            return (
              <G key={`xAxisTick-${index}`}>
                <Text
                  x={xPoint}
                  y="0"
                  fontSize="10"
                  textAnchor="middle"
                  alignmentBaseline="hanging"
                >
                  {multiFormat(element)}
                </Text>
                <Line
                  y1={-yScale(minimumValue) + realPaddings.xAxisPadding}
                  y2="0"
                  x1={xPoint}
                  x2={xPoint}
                  strokeWidth="1"
                  stroke="black"
                />
              </G>
            );
          })}
        </G>
        <G transform={`translate(${realPaddings.left - 5},0)`}>
          {yAxisTicks.map((element, index) => {
            const yPoint = yScale(element);
            return (
              <G key={`yAxisTick-${index}`}>
                <Text
                  x="0"
                  y={yPoint}
                  fontSize="10"
                  textAnchor="end"
                  alignmentBaseline="central"
                >
                  {nFormatter(element)}
                </Text>
                <Line
                  y1={yPoint}
                  y2={yPoint}
                  x1="0"
                  x2={xScale(data.at(-1).time) - realPaddings.right}
                  strokeWidth="1"
                  stroke="black"
                />
              </G>
            );
          })}
        </G>
      </G>
    </Svg>
  );
};

export default BasicLineChart;

我知道 d3.js 主要是针对 Web 的库。我知道它使用 DOM Manipulation 来呈现图表但是你知道它是用 Javascript 编写的所以我想知道我们是否可以在 React Native 上完全实现 d3 的功能。

我想知道是否有人可以告诉我如何对该图表实施缩放事件或平移事件。

我需要了解这个过程，所以如果你在告诉我的时候很清楚，我将非常感激。

İ 如果您需要更多信息，请问我，我会提供。