Библиотека VISX в ReactJS
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
Выход: