ReactJS 中的 VISX 库

VISX是一个库，它允许我们毫无问题地将设计添加到我们的 React 应用程序中。在下面的示例中，我们展示了如何使用它来将区域对比图添加到我们的 React 应用程序中。

模块安装：我们必须安装Visx库提供的大量模块来制作面积差异图。为此，请从终端运行以下命令。

$ npm install --save @visx/axis @visx/curve 
@visx/gradient @visx/grid @visx/group @visx/mock-data 
@visx/react-spring @visx/responsive @visx/shape 
@visx/scale react-spring

注意： @visx/mock-data库有我们可以在可视化图表中使用的模拟数据。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

示例：要添加实心线图，我们编写以下代码。

文件名：App.js

Javascript

import React, { useState, useMemo } from "react";
import AreaClosed from "@visx/shape/lib/shapes/AreaClosed";
import { curveMonotoneX } from "@visx/curve";
import {
  scaleUtc,
  scaleLinear,
  scaleLog,
  scaleBand,
  coerceNumber
} from "@visx/scale";
import { Orientation } from "@visx/axis";
import {
  AnimatedAxis,
  AnimatedGridRows,
  AnimatedGridColumns
} from "@visx/react-spring";
import { LinearGradient } from "@visx/gradient";
import { timeFormat } from "d3-time-format";
  
export const backgroundColor = "#da7cff";
const axisColor = "#fff";
const tickLabelColor = "#fff";
export const labelColor = "#340098";
const gridColor = "#6e0fca";
const margin = {
  top: 40,
  right: 150,
  bottom: 20,
  left: 50
};
  
const tickLabelProps = () => ({
  fill: tickLabelColor,
  fontSize: 12,
  fontFamily: "sans-serif",
  textAnchor: "middle"
});
  
const getMinMax = (vals) => {
  const numericVals = vals.map(coerceNumber);
  return [Math.min(...numericVals),
          Math.max(...numericVals)];
};
  
function Example({
  width: outerWidth = 800,
  height: outerHeight = 800,
  showControls = true
}) {
  const width = outerWidth - margin.left - margin.right;
  const height = outerHeight - margin.top - margin.bottom;
  const [dataToggle] = useState(true);
  const [animationTrajectory] = useState("center");
  
  const axes = useMemo(() => {
    const linearValues = dataToggle ? [0, 2, 4, 6, 8, 10] :
                                      [6, 8, 10, 12];
  
  return [
      {
        scale: scaleLinear({
          domain: getMinMax(linearValues),
          range: [0, width]
        }),
        values: linearValues,
        tickFormat: (v, index, ticks) =>
          index === 0
            ? "first"
            : index === ticks[ticks.length - 1].index
            ? "last"
            : `${v}`,
        label: "linear"
      }
    ];
  }, [dataToggle, width]);
  
  if (width < 10) return null;
  
  const scalePadding = 40;
  const scaleHeight = height / axes.length - scalePadding;
  
  const yScale = scaleLinear({
    domain: [100, 0],
    range: [scaleHeight, 0]
  });
  
  return (
    <>
      
    
  );
}
  
export default function App() {
  return (
    

      
    
  );
}

说明：我们添加backgroundColor设置基础色调， axisColor为轴心色调， tickLabelColor为 x-hub 刻度名称色调， labelColor为 y-hub 名称色调， gridColor为网络色调。

我们使用tickLabelProps更改内容样式。要添加图表内容，我们添加轴集群。我们从dataToggle对象注册图表的质量， linearValues具有直刻度值。我们有 y-Scale 对象来添加 y-pivot 值。在我们返回的 JSX 中，我们添加了 SVG、 rect square shape 组件，然后在axes中添加。 map回调，我们返回图表。该图表具有带有 SVG 集合的g-组件， AnimatedGridRows具有活跃的格列。

我们将 y-Scale 激励传递给它以显示y 值，stroke设置描边， width设置宽度， AnimatedGridColumns具有框架部分， numTicks允许我们设置 x-hub 上的刻度数。我们有与AnimatedGridColumns段类似的代码来添加部分， AreaClosed有填充的折线图， AnimatedAxis有活跃的 x-pivot。我们使用 labelProps 设置名称样式，并且 tickValues具有刻度值。

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：