Библиотека VISX в ReactJS

Опубликовано: 7 Августа, 2021

VISX - это библиотека, которая позволяет нам без проблем добавлять дизайн в наше приложение React. В следующем примере мы показали, как использовать его для добавления графиков контраста территорий в наше приложение React.

Установка модуля: мы должны установить множество модулей, предоставленных библиотекой Visx, чтобы составить диаграмму разницы площадей. Для этого запустите следующую команду на своем терминале.

 $ npm install --save @ visx / axis @ visx / curve 
@ visx / gradient @ visx / grid @ visx / group @ visx / mock-data 
@ visx / react-spring @ visx / responseive @ visx / shape 
@ visx / scale реагирующая пружина

Примечание. В библиотеке @ visx / mock-data есть фиктивные данные, которые мы можем использовать в наших визуальных диаграммах.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

Пример: чтобы добавить заполненный линейный график, мы пишем следующий код.

Имя файла: 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 (
    <>
      <svg width={outerWidth} height={outerHeight}>
        <LinearGradient
          id= "visx-axis-gradient"
          from={backgroundColor}
          to={backgroundColor}
          toOpacity={0.5}
        />
        <rect
          x={0}
          y={0}
          width={outerWidth}
          height={outerHeight}
          fill={ "url(#visx-axis-gradient)" }
          rx={14}
        />
        <g transform={`translate(${margin.left},${margin.top})`}>
          {axes.map(({ scale, values, label, tickFormat }, i) => (
            <g
              key={`scale-${i}`}
              transform={`translate(0, ${i * (scaleHeight + scalePadding)})`}
            >
              <AnimatedGridRows
                key={`gridrows-${animationTrajectory}`}
                scale={yScale}
                stroke={gridColor}
                width={width}
                numTicks={dataToggle ? 1 : 3}
                animationTrajectory={animationTrajectory}
              />
              <AnimatedGridColumns
                key={`gridcolumns-${animationTrajectory}`}
                scale={scale}
                stroke={gridColor}
                height={scaleHeight}
                numTicks={dataToggle ? 5 : 2}
                animationTrajectory={animationTrajectory}
              />
              <AreaClosed
                data={values.map((x) => [
                  (scale(x) ?? 0) +
                    ( "bandwidth" in scale &&
                    typeof scale.bandwidth !== "undefined"
                      ? scale.bandwidth() / 2
                      : 0),
                  yScale(10 + Math.random() * 90)
                ])}
                yScale={yScale}
                curve={curveMonotoneX}
                fill={gridColor}
                fillOpacity={0.2}
              />
              <AnimatedAxis
                key={`axis-${animationTrajectory}`}
                orientation={Orientation.bottom}
                top={scaleHeight}
                scale={scale}
                tickFormat={tickFormat}
                stroke={axisColor}
                tickStroke={axisColor}
                tickLabelProps={tickLabelProps}
                tickValues={
                  label === "log" || label === "time" ? undefined : values
                }
                numTicks={label === "time" ? 6 : undefined}
                label={label}
                labelProps={{
                  x: width + 30,
                  y: -10,
                  fill: labelColor,
                  fontSize: 18,
                  strokeWidth: 0,
                  stroke: "#fff" ,
                  paintOrder: "stroke" ,
                  fontFamily: "sans-serif" ,
                  textAnchor: "start"
                }}
                animationTrajectory={animationTrajectory}
              />
            </g>
          ))}
        </g>
      </svg>
    </>
  );
 }
 
export function default App() {
  return (
    <div>
      <Example width= "500" height= "300" />
    </div>
  );
 }

Объяснение: мы добавляем backgroundColor для установки основного тона, axisColor имеет основной тон, tickLabelColor имеет тон имени галочки x-hub, labelColor имеет тон имени y-hub, gridColor имеет тон сети.

Мы меняем стили содержимого с помощью работы tickLabelProps. Чтобы добавить содержимое диаграммы, мы добавляем кластер осей. Мы регистрируем качество для диаграммы от объекта dataToggle, linearValues имеет прямую шкалу самоуважения. У нас есть объект y-Scale для добавления оценок y-pivot. В возвращаемом JSX мы добавляем SVG, компонент прямоугольной формы, а затем в оси . обратный вызов карты , мы возвращаем график. На диаграмме присутствует компонент g- со сборкой SVG, в AnimatedGridRows - оживленные столбцы решетки.

Мы передаем ему стимул y-Scale, чтобы показать y-оценки, stroke устанавливает обводку, width устанавливает ширину, AnimatedGridColumns имеет разделы структуры, numTicks позволяет нам установить количество тактов на x-hub. У нас есть сопоставимый код с сегментом AnimatedGridColumns для добавления разделов, AreaClosed имеет заполненную линейную диаграмму, AnimatedAxis имеет оживленную x-pivot. Мы устанавливаем стили имен с помощью labelProps, а tickValues имеет значение тика.

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Выход:

Technical Scripter

Библиотека VISX в ReactJS

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ