{"id":465821,"date":"2025-07-03T09:25:19","date_gmt":"2025-07-03T09:25:19","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=465821"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=465821","title":{"rendered":"Code Tutorials \u2014 React: \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u0433\u0440\u0430\u0444<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
<\/p>\n

<\/p>\n

<\/p>\n

\u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n

<\/p>\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u044f \u0434\u0435\u043b\u044e\u0441\u044c \u0441 \u0432\u0430\u043c\u0438 \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0438\u0437 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e.<\/p>\n

<\/p>\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 react-force-graph-2d<\/a> \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u043e\u0432.<\/p>\n

<\/p>\n

\u0414\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n

<\/p>\n

https:\/\/react-graph.netlify.app\/<\/a><\/div>\n

<\/p>\n

\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n

<\/p>\n

git clone https:\/\/github.com\/harryheman\/react-graph.git cd react-graph npm i npm run dev<\/code><\/pre>\n
 <\/p>\n
\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e? \u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0448\u0443 \u043f\u043e\u0434 \u043a\u0430\u0442.<\/p>\n
<\/a> <\/p>\n
\u276f \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/h2>\n
 <\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0447\u0438\u0441\u0442\u044b\u0439 React+Typescript \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vite<\/a>:<\/p>\n
 <\/p>\n
npm create vite react-graph --template react-ts<\/code><\/pre>\n
 <\/p>\n
\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0443\u044e \u043d\u0430\u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443:<\/p>\n
 <\/p>\n
cd react-graph # \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 npm i react-force-graph-2d<\/code><\/pre>\n
 <\/p>\n
\u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src<\/code>.<\/p>\n
 <\/p>\n
\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e assets<\/code> \u0438 \u0444\u0430\u0439\u043b App.css<\/code> \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 index.css<\/code>:<\/p>\n
 <\/p>\n
html, body, #root {   min-height: 100%; }  body {   margin: 0; }  #root {   display: flex;   justify-content: center;   align-items: center; }  h3 {   margin: 0; }  hr {   width: 100%; }<\/code><\/pre>\n
 <\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e components<\/code>.<\/p>\n
 <\/p>\n
\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 components\/Flex.tsx<\/code>:<\/p>\n
 <\/p>\n
import { forwardRef, type CSSProperties, type PropsWithChildren } from 'react'  export const Flex = forwardRef<   HTMLDivElement,   PropsWithChildren<CSSProperties> >(({ children, ...styles }, ref) => {   return (     <div       ref={ref}       style={{         display: 'flex',         ...styles,       }}     >       {children}     <\/div>   ) })<\/code><\/pre>\n
 <\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e components\/Graph<\/code> \u0434\u043b\u044f \u0433\u0440\u0430\u0444\u043e\u0432.<\/p>\n
 <\/p>\n
\u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0435\u0435 \u0432 Graph\/utils.ts<\/code>:<\/p>\n
 <\/p>\n
import type { LinkObject, NodeObject } from 'react-force-graph-2d'  export function generateGraphData(   n = 10,   reverse = false, ): {   nodes: (NodeObject & {     neighbors?: NodeObject[]     links?: LinkObject[]   })[]   links: LinkObject[] } {   return {     \/\/ \u0423\u0437\u0435\u043b \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b `id`     nodes: [...Array(n).keys()].map((i) => ({       id: i,       name: `node ${i + 1}`,       neighbors: [],       links: [],     })),     \/\/ \u0420\u0435\u0431\u0440\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b `source` \u0438 `target`     links: [...Array(n).keys()]       .filter((id) => id)       .map((id) => ({         [reverse ? 'target' : 'source']: id,         [reverse ? 'source' : 'target']: Math.round(Math.random() * (id - 1)),         name: `link ${id}`,       })),   } }<\/code><\/pre>\n
 <\/p>\n
\u276f API<\/h2>\n
 <\/p>\n
\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 API, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439.<\/p>\n
 <\/p>\n
\u0414\u0430\u043d\u043d\u044b\u0435<\/h3>\n
 <\/p>\n
\n\n\n\n\n\n\n\n\n
\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/th>\n\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n\u0422\u0438\u043f<\/th>\n\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/th>\n<\/tr>\n<\/thead>\n
graphData<\/code><\/td>\n\u0414\u0430\u043d\u043d\u044b\u0435<\/td>\n{ nodes: NodeObject[], links: LinkObject[] }<\/code><\/td>\n{ nodes: [], links: [] }<\/code><\/td>\n<\/tr>\n
nodeId<\/code><\/td>\n\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nstring<\/code><\/td>\nid<\/code><\/td>\n<\/tr>\n
linkSource<\/code><\/td>\n\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u0435\u0440\u0448\u0438\u043d\u044b-\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430<\/td>\nstring<\/code><\/td>\nsource<\/code><\/td>\n<\/tr>\n
linkTarget<\/code><\/td>\n\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u0435\u0440\u0448\u0438\u043d\u044b-\u0446\u0435\u043b\u0438<\/td>\nstring<\/code><\/td>\ntarget<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
 <\/p>\n
\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/h3>\n
 <\/p>\n
\n\n\n\n\n\n\n\n
\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/th>\n\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n\u0422\u0438\u043f<\/th>\n\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/th>\n<\/tr>\n<\/thead>\n
width<\/code><\/td>\n\u0428\u0438\u0440\u0438\u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/td>\nnumber<\/code><\/td>\n\u0428\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/td>\n<\/tr>\n
height<\/code><\/td>\n\u0412\u044b\u0441\u043e\u0442\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/td>\nnumber<\/code><\/td>\n\u0412\u044b\u0441\u043e\u0442\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/td>\n<\/tr>\n
backgroundColor<\/code><\/td>\n\u0426\u0432\u0435\u0442 \u0444\u043e\u043d\u0430<\/td>\nstring<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
 <\/p>\n
\u0412\u0435\u0440\u0448\u0438\u043d\u0430<\/h3>\n
 <\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/th>\n\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n\u0422\u0438\u043f<\/th>\n\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/th>\n<\/tr>\n<\/thead>\n
nodeRelSize<\/code><\/td>\n\u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043b\u043e\u0449\u0430\u0434\u0438 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/td>\nnumber<\/code><\/td>\n4<\/code><\/td>\n<\/tr>\n
nodeVal<\/code><\/td>\n\u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nnumber \\| string \\| function<\/code><\/td>\nval<\/code><\/td>\n<\/tr>\n
nodeLabel<\/code><\/td>\n\u041f\u043e\u0434\u043f\u0438\u0441\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nstring \\| function<\/code><\/td>\nname<\/code><\/td>\n<\/tr>\n
nodeVisibility<\/code><\/td>\n\u0412\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nboolean \\| string \\| function<\/code><\/td>\ntrue<\/code><\/td>\n<\/tr>\n
nodeColor<\/code><\/td>\n\u0426\u0432\u0435\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nstring \\| function<\/code><\/td>\ncolor<\/code><\/td>\n<\/tr>\n
nodeAutoColorBy<\/code><\/td>\n\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u0446\u0432\u0435\u0442\u043e\u0432<\/td>\nstring \\| function<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
nodeCanvasObject<\/code><\/td>\n\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nfunction<\/code><\/td>\n\u041a\u0440\u0443\u0433 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c val<\/code> \u0438 \u0446\u0432\u0435\u0442\u043e\u043c color<\/code><\/td>\n<\/tr>\n
nodeCanvasObjectMode<\/code><\/td>\n\u0421\u0442\u0440\u043e\u043a\u0430 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u0440\u0435\u0436\u0438\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u044b (\u0441\u043c. \u043d\u0438\u0436\u0435)<\/td>\nstring \\| function<\/code><\/td>\n() => 'replace'<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
nodeCanvasObjectMode<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 nodeCanvasObject<\/code> \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n
 <\/p>\n
    \n
  • replace<\/code> \u2014 \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e nodeCanvasObject<\/code><\/li>\n
  • before<\/code> \u2014 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e nodeCanvasObject<\/code>, \u0437\u0430\u0442\u0435\u043c \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u0430<\/li>\n
  • after<\/code> \u2014 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f nodeCanvasObject<\/code><\/li>\n<\/ul>\n
     <\/p>\n
    \u0420\u0435\u0431\u0440\u043e<\/h3>\n
     <\/p>\n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/th>\n\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n\u0422\u0438\u043f<\/th>\n\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/th>\n<\/tr>\n<\/thead>\n
    linkLabel<\/code><\/td>\n\u041f\u043e\u0434\u043f\u0438\u0441\u044c \u0440\u0435\u0431\u0440\u0430<\/td>\nstring \\| function<\/code><\/td>\nname<\/code><\/td>\n<\/tr>\n
    linkVisibility<\/code><\/td>\n\u0412\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0440\u0435\u0431\u0440\u0430<\/td>\nboolean \\| string \\| function<\/code><\/td>\nval<\/code><\/td>\n<\/tr>\n
    linkColor<\/code><\/td>\n\u0426\u0432\u0435\u0442 \u0440\u0435\u0431\u0440\u0430<\/td>\nstring \\| function<\/code><\/td>\ncolor<\/code><\/td>\n<\/tr>\n
    linkAutoColorBy<\/code><\/td>\n\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u0446\u0432\u0435\u0442\u043e\u0432<\/td>\nstring \\| function<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
    linkLineDash<\/code><\/td>\n\u041c\u0430\u0441\u0441\u0438\u0432 \u0447\u0438\u0441\u0435\u043b, \u0441\u0442\u0440\u043e\u043a\u0430 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0440\u044b\u0432\u0438\u0441\u0442\u043e\u0439 \u043b\u0438\u043d\u0438\u0438<\/td>\nnumber[] \\| string \\| function<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
    linkWidth<\/code><\/td>\n\u0428\u0438\u0440\u0438\u043d\u0430 \u043b\u0438\u043d\u0438\u0438<\/td>\nnumber \\| string \\| function<\/code><\/td>\n1<\/code><\/td>\n<\/tr>\n
    linkCurvature<\/code><\/td>\n\u0420\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0438\u0432\u0438\u0437\u043d\u044b \u043b\u0438\u043d\u0438\u0438<\/td>\nnumber \\| string \\| function<\/code><\/td>\n0<\/code><\/td>\n<\/tr>\n
    linkCanvasObject<\/code><\/td>\n\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0431\u0440\u0430<\/td>\nfunction<\/code><\/td>\n\u041b\u0438\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u043e\u0439 width<\/code> \u0438 \u0446\u0432\u0435\u0442\u043e\u043c color<\/code><\/td>\n<\/tr>\n
    linkCanvasObjectMode<\/code><\/td>\n\u0421\u0442\u0440\u043e\u043a\u0430 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u0440\u0435\u0436\u0438\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0431\u0440\u0430 (\u0441\u043c. \u043d\u0438\u0436\u0435)<\/td>\nstring \\| function<\/code><\/td>\n() => 'replace'<\/code><\/td>\n<\/tr>\n
    linkDirectionalArrowLength<\/code><\/td>\n\u0428\u0438\u0440\u0438\u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0438<\/td>\nnumber \\| string \\| function<\/code><\/td>\n0<\/code><\/td>\n<\/tr>\n
    linkDirectionalArrowColor<\/code><\/td>\n\u0426\u0432\u0435\u0442 \u0441\u0442\u0440\u0435\u043b\u043a\u0438<\/td>\nstring \\| function<\/code><\/td>\ncolor<\/code><\/td>\n<\/tr>\n
    linkDirectionalArrowRelPos<\/code><\/td>\n\u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0438 (\u043e\u0442 0<\/code> \u0434\u043e 1<\/code>)<\/td>\nnumber \\| string \\| function<\/code><\/td>\n0.5<\/code> (\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435)<\/td>\n<\/tr>\n
    linkDirectionalParticles<\/code><\/td>\n\u0410\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b (\u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0440\u0443\u0433\u0438) \u043f\u043e\u0432\u0435\u0440\u0445 \u0440\u0435\u0431\u0440\u0430<\/td>\nnumber \\| string \\| function<\/code><\/td>\n0<\/code><\/td>\n<\/tr>\n
    linkDirectionalParticleSpeed<\/code><\/td>\n\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0447\u0430\u0441\u0442\u0438\u0446<\/td>\nnumber \\| string \\| function<\/code><\/td>\n0.01<\/code><\/td>\n<\/tr>\n
    linkDirectionalParticleWidth<\/code><\/td>\n\u0428\u0438\u0440\u0438\u043d\u0430 \u0447\u0430\u0441\u0442\u0438\u0446\u044b<\/td>\nnumber \\| string \\| function<\/code><\/td>\n0.5<\/code><\/td>\n<\/tr>\n
    linkDirectionalParticleColor<\/code><\/td>\n\u0426\u0432\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0446\u044b<\/td>\nstring \\| function<\/code><\/td>\ncolor<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
     <\/p>\n
     <\/p>\n
     <\/p>\n
    linkCanvasObjectMode<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 linkCanvasObject<\/code> \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0431\u0435\u0440. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n
     <\/p>\n
      \n
    • replace<\/code> \u2014 \u0440\u0435\u0431\u0440\u043e \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e linkCanvasObject<\/code><\/li>\n
    • before<\/code> \u2014 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0431\u0440\u043e \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e linkCanvasObject<\/code>, \u0437\u0430\u0442\u0435\u043c \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0440\u0435\u0431\u0440\u043e<\/li>\n
    • after<\/code> \u2014 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0431\u0440\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f linkCanvasObject<\/code><\/li>\n<\/ul>\n
       <\/p>\n
      \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c<\/h3>\n
       <\/p>\n
      \n\n\n\n\n\n\n\n\n\n
      \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/th>\n\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n\u0422\u0438\u043f<\/th>\n\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/th>\n<\/tr>\n<\/thead>\n
      autoPauseRedraw<\/code><\/td>\n\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0445\u043e\u043b\u0441\u0442\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u0430\u0434\u0440\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/td>\nboolean<\/code><\/td>\ntrue<\/code><\/td>\n<\/tr>\n
      minZoom<\/code><\/td>\n\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431<\/td>\nnumber<\/code><\/td>\n0.01<\/code><\/td>\n<\/tr>\n
      maxZoom<\/code><\/td>\n\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431<\/td>\nnumber<\/code><\/td>\n1000<\/code><\/td>\n<\/tr>\n
      onRenderFramePre<\/code><\/td>\n\u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u0430\u0434\u0440\u0435 \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u0432\u0435\u0440\u0448\u0438\u043d\u044b\/\u0440\u0435\u0431\u0440\u0430<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onRenderFramePost<\/code><\/td>\n\u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u0430\u0434\u0440\u0435 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u0435\u0440\u0448\u0438\u043d\u044b\/\u0440\u0435\u0431\u0440\u0430<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
       <\/p>\n
      \u041c\u0435\u0442\u043e\u0434\u044b<\/h4>\n
       <\/p>\n
      \n\n\n\n\n\n\n\n\n\n
      \u041c\u0435\u0442\u043e\u0434<\/th>\n\u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<\/th>\n\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n
      pauseAnimation<\/code><\/td>\n—<\/td>\n\u041f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, «\u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u044f» \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/td>\n<\/tr>\n
      resumeAnimation<\/code><\/td>\n—<\/td>\n\u0412\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/td>\n<\/tr>\n
      centerAt<\/code><\/td>\n(x?, y?, ms?)<\/code><\/td>\n\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043d\u0442\u0440\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/td>\n<\/tr>\n
      zoom<\/code><\/td>\n(number?, ms?)<\/code><\/td>\n\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0445\u043e\u043b\u0441\u0442\u0430<\/td>\n<\/tr>\n
      zoomToFit<\/code><\/td>\n(ms?, px?, nodeFilterFn?)<\/code><\/td>\n\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442 \u0433\u0440\u0430\u0444 \u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
       <\/p>\n
      \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/h3>\n
       <\/p>\n
      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/th>\n\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n\u0422\u0438\u043f<\/th>\n\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/th>\n<\/tr>\n<\/thead>\n
      onNodeClick<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u0435<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onNodeRightClick<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onNodeHover<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onNodeDrag<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onNodeDragEnd<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onLinkClick<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0440\u0435\u0431\u0440\u0443<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onLinkRightClick<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0440\u0435\u0431\u0440\u0443 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onLinkHover<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0440\u0435\u0431\u0440\u043e<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onBackgroundClick<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u0433\u0440\u0430\u0444\u0430<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onBackgroundRightClick<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u0433\u0440\u0430\u0444\u0430 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      linkHoverPrecision<\/code><\/td>\n\u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0440\u0435\u0431\u0440\u043e, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0438<\/td>\nnumber<\/code><\/td>\n4<\/code><\/td>\n<\/tr>\n
      onZoom<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      onZoomEnd<\/code><\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/td>\nfunction<\/code><\/td>\nundefined<\/code><\/td>\n<\/tr>\n
      enableZoomInteraction<\/code><\/td>\n\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/td>\nboolean<\/code><\/td>\ntrue<\/code><\/td>\n<\/tr>\n
      enablePanInteraction<\/code><\/td>\n\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0430<\/td>\nboolean<\/code><\/td>\ntrue<\/code><\/td>\n<\/tr>\n
      enablePointerInteraction<\/code><\/td>\n\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f (\u043a\u043b\u0438\u043a, \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u0434\u0440.)<\/td>\nboolean<\/code><\/td>\ntrue<\/code><\/td>\n<\/tr>\n
      enableNodeDrag<\/code><\/td>\n\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d<\/td>\nboolean<\/code><\/td>\ntrue<\/code><\/td>\n<\/tr>\n
      nodePointerAreaPaint<\/code><\/td>\n\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u044b<\/td>\nfunction<\/code><\/td>\n\u041a\u0440\u0443\u0433 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0441 \u0432\u0435\u0440\u0448\u0438\u043d\u0443<\/td>\n<\/tr>\n
      linkPointerAreaPaint<\/code><\/td>\n\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0440\u0435\u0431\u0440\u0430<\/td>\nfunction<\/code><\/td>\n\u041f\u0440\u044f\u043c\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0432\u0435\u0440\u0448\u0438\u043d\u0430\u043c\u0438<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
       <\/p>\n
      \u276f \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n
       <\/p>\n
      \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0433\u0440\u0430\u0444\u0430.<\/p>\n
       <\/p>\n
      \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/h3>\n
       <\/p>\n
      \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0433\u0440\u0430\u0444 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c, \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u043c (\u0441\u0430\u043c \u0433\u0440\u0430\u0444 \u0438 \u0443\u0437\u043b\u044b) \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f (\u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430, \u043a\u043b\u0438\u043a \u043f\u043e \u0443\u0437\u043b\u0443\/\u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u0438 \u0442.\u043f.). \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0433\u0440\u0430\u0444 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0443\u0437\u0435\u043b\/\u0433\u0440\u0430\u0444 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0442\u0443\u043b\u0442\u0438\u043f \u0441 \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e\u043b\u0435 name<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u043f\u043e\u0432 nodeLabel<\/code> \u0438 linkLabel<\/code>).<\/p>\n
       <\/p>\n
      \/\/ Graph\/Basic.tsx import { useState } from 'react' import ForceGraph from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { generateGraphData } from '.\/utils'  const graphData = generateGraphData()  function Basic() {   \/\/ \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435   const [enableZoomInteraction, setEnableZoomInteraction] = useState(true)   \/\/ \u041f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430   const [enablePanInteraction, setEnablePanInteraction] = useState(true)   \/\/ \u041f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432   const [enableNodeDrag, setEnableNodeDrag] = useState(true)   \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f   const [enablePointerInteraction, setEnablePointerInteraction] = useState(true)    return (     <Flex flexDirection='column' gap={12}>       <h3>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/h3>       <fieldset>         <legend>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/legend>         <Flex flexDirection='column' gap={8}>           <label>             <input               type='checkbox'               checked={enableZoomInteraction}               onChange={(e) => setEnableZoomInteraction(e.target.checked)}             \/>{' '}             \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430           <\/label>           <label>             <input               type='checkbox'               checked={enablePanInteraction}               onChange={(e) => setEnablePanInteraction(e.target.checked)}             \/>{' '}             \u041f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430           <\/label>           <label>             <input               type='checkbox'               checked={enableNodeDrag}               onChange={(e) => setEnableNodeDrag(e.target.checked)}             \/>{' '}             \u041f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0440\u0448\u0438\u043d           <\/label>           <label>             <input               type='checkbox'               checked={enablePointerInteraction}               onChange={(e) => setEnablePointerInteraction(e.target.checked)}             \/>{' '}             \u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f           <\/label>         <\/Flex>       <\/fieldset>       <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           enableZoomInteraction={enableZoomInteraction}           enablePanInteraction={enablePanInteraction}           enableNodeDrag={enableNodeDrag}           enablePointerInteraction={enablePointerInteraction}         \/>       <\/Flex>     <\/Flex>   ) }  export default Basic<\/code><\/pre>\n
       <\/p>\n
      \u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d<\/h3>\n
       <\/p>\n
      \/\/ Graph\/Node.tsx import { useState } from 'react' import ForceGraph from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { generateGraphData } from '.\/utils'  const graphData = generateGraphData()  function Node() {   \/\/ \u0412\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d   const [nodeVisibility, setNodeVisibility] = useState(true)   \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0435\u0440\u0448\u0438\u043d   const [nodeRelSize, setNodeRelSize] = useState(4)   \/\/ \u0426\u0432\u0435\u0442 \u0432\u0435\u0440\u0448\u0438\u043d   const [nodeColor, setNodeColor] = useState('deepskyblue')    return (     <Flex flexDirection='column' gap={12}>       <h3>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d<\/h3>       <fieldset>         <legend>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/legend>         <Flex flexDirection='column' gap={8}>           <label>             <input               type='checkbox'               checked={nodeVisibility}               onChange={(e) => setNodeVisibility(e.target.checked)}             \/>{' '}             \u0412\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d           <\/label>           <label>             \u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0435\u0440\u0448\u0438\u043d{' '}             <input               type='number'               value={nodeRelSize}               onChange={(e) => setNodeRelSize(Number(e.target.value))}               min={4}               max={12}             \/>           <\/label>           <Flex gap={8} alignItems='center'>             <label>\u0426\u0432\u0435\u0442 \u0432\u0435\u0440\u0448\u0438\u043d<\/label>             <input               type='color'               value={nodeColor}               onChange={(e) => setNodeColor(e.target.value)}             \/>              <button onClick={() => setNodeColor('deepskyblue')}>\u0421\u0431\u0440\u043e\u0441<\/button>           <\/Flex>         <\/Flex>       <\/fieldset>       <Flex         width={768}         height={480}         border='1px dashed rgba(0,0,0,0.25)'         justifyContent='center'         alignItems='center'       >         <ForceGraph           width={768}           height={480}           graphData={graphData}           nodeVisibility={nodeVisibility}           nodeRelSize={nodeRelSize}           nodeColor={() => nodeColor}         \/>       <\/Flex>     <\/Flex>   ) }  export default Node<\/code><\/pre>\n
       <\/p>\n
      \u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044f val<\/code>, \u0430 \u0446\u0432\u0435\u0442 \u2014 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044f color<\/code>.<\/p>\n
       <\/p>\n
      \u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0435\u0431\u0435\u0440<\/h3>\n
       <\/p>\n
      \/\/ Graph\/Link.tsx import { useEffect, useState } from 'react' import ForceGraph from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { generateGraphData } from '.\/utils'  const initialGraphData = generateGraphData()  function Link() {   const [graphData, setGraphData] = useState(initialGraphData)    \/\/ \u0412\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0440\u0435\u0431\u0435\u0440   const [linkVisibility, setLinkVisibility] = useState(true)   \/\/ \u0426\u0432\u0435\u0442 \u0440\u0435\u0431\u0435\u0440   const [linkColor, setLinkColor] = useState('deepskyblue')   \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0440\u0435\u0431\u0435\u0440   const [linkWidth, setLinkWidth] = useState(1)   \/\/ \u041f\u0440\u0435\u0440\u044b\u0432\u0438\u0441\u0442\u043e\u0441\u0442\u044c \u043b\u0438\u043d\u0438\u0438   const [linkLineDash, setLinkLineDash] = useState(false)   \/\/ \u041a\u0440\u0438\u0432\u0438\u0437\u043d\u0430 \u043b\u0438\u043d\u0438\u0438   const [linkCurvature, setLinkCurvature] = useState(false)   \/\/ \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0438   const [linkDirectionalArrowLength, setLinkDirectionalArrowLength] =     useState(0)   \/\/ \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0438   const [linkDirectionalArrowRelPos, setLinkDirectionalArrowRelPos] =     useState(0.5)   \/\/ \u0414\u0432\u043e\u0438\u0306\u043d\u044b\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0438   const [doubleArrows, setDoubleArrows] = useState(false)    useEffect(() => {     if (doubleArrows) {       \/\/ \u0423\u0434\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0431\u0435\u0440       const links = [...initialGraphData.links]       const reversedLinks = links.map((link, i) => {         return {           id: links.length + i + 1,           source: link.target,           target: link.source,         }       })       const allLinks = links.concat(reversedLinks)       const newGraphData = {         nodes: [...initialGraphData.nodes],         links: allLinks,       }       setGraphData(newGraphData)     } else {       setGraphData(initialGraphData)     }   }, [doubleArrows])    return (     <Flex flexDirection='column' gap={12}>       <h3>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0435\u0431\u0435\u0440<\/h3>       <fieldset>         <legend>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/legend>         <Flex flexDirection='column' gap={8}>           <label>             <input               type='checkbox'               checked={linkVisibility}               onChange={(e) => setLinkVisibility(e.target.checked)}             \/>{' '}             \u0412\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d           <\/label>           <label>             \u0428\u0438\u0440\u0438\u043d\u0430 \u0440\u0435\u0431\u0435\u0440{' '}             <input               type='number'               value={linkWidth}               onChange={(e) => setLinkWidth(Number(e.target.value))}               min={1}               max={4}             \/>           <\/label>           <Flex gap={8} alignItems='center'>             <label>\u0426\u0432\u0435\u0442 \u0440\u0435\u0431\u0435\u0440<\/label>             <input               type='color'               value={linkColor}               onChange={(e) => setLinkColor(e.target.value)}             \/>              <button onClick={() => setLinkColor('deepskyblue')}>\u0421\u0431\u0440\u043e\u0441<\/button>           <\/Flex>           <label>             <input               type='checkbox'               checked={linkLineDash}               onChange={(e) => setLinkLineDash(e.target.checked)}             \/>{' '}             \u041f\u0440\u0435\u0440\u044b\u0432\u0438\u0441\u0442\u0430\u044f \u043b\u0438\u043d\u0438\u044f           <\/label>           <label>             <input               type='checkbox'               checked={linkCurvature}               onChange={(e) => setLinkCurvature(e.target.checked)}             \/>{' '}             \u041a\u0440\u0438\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f           <\/label>           <label>             \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0438{' '}             <input               type='number'               value={linkDirectionalArrowLength}               onChange={(e) =>                 setLinkDirectionalArrowLength(Number(e.target.value))               }               min={0}               max={8}             \/>           <\/label>           <label>             \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0438{' '}             <input               type='number'               value={linkDirectionalArrowRelPos}               onChange={(e) =>                 setLinkDirectionalArrowRelPos(Number(e.target.value))               }               min={0}               max={1}               step={0.1}             \/>           <\/label>           <label>             <input               type='checkbox'               checked={doubleArrows}               onChange={(e) => setDoubleArrows(e.target.checked)}             \/>{' '}             \u0414\u0432\u043e\u0439\u043d\u044b\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0438           <\/label>         <\/Flex>       <\/fieldset>       <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           linkVisibility={linkVisibility}           linkColor={() => linkColor}           linkWidth={linkWidth}           \/\/ [\u0448\u0438\u0440\u0438\u043d\u0430 \u043b\u0438\u043d\u0438\u0438, \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u0430]           linkLineDash={linkLineDash ? [4, 2] : undefined}           \/\/ \u043e\u0442 0 \u0434\u043e 1           linkCurvature={linkCurvature ? 1 : undefined}           linkDirectionalArrowColor={() => linkColor}           linkDirectionalArrowLength={linkDirectionalArrowLength}           linkDirectionalArrowRelPos={linkDirectionalArrowRelPos}         \/>       <\/Flex>     <\/Flex>   ) }  export default Link<\/code><\/pre>\n
       <\/p>\n
      \u0426\u0432\u0435\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044f color<\/code>.<\/p>\n
       <\/p>\n
      \u0418\u043a\u043e\u043d\u043a\u0430 \u0432 \u0443\u0437\u043b\u0435<\/h3>\n
       <\/p>\n
      \u0414\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 \u0443\u0437\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0435\u0435 \u0432 Graph\/utils.ts<\/code>:<\/p>\n
       <\/p>\n
      export type DrawNodeImageProps = {   \/\/ \u0423\u0437\u0435\u043b   node: NodeObject   \/\/ \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f   ctx: CanvasRenderingContext2D   \/\/ \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435   image: CanvasImageSource | OffscreenCanvas }  \/\/ \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0438\u0306 \u0440\u0430\u0437\u043c\u0435\u0440 \u0443\u0437\u043b\u0430 const defaultNodeSize = 4  export const drawNodeImage = ({ node, ctx, image }: DrawNodeImageProps) => {   if (!image) return    \/\/ \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0443\u0437\u043b\u0430   const nodeX = node.x || 0   const nodeY = node.y || 0   const nodeSize = Number(node.val) || defaultNodeSize    \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435   ctx.drawImage(     image,     nodeX - nodeSize,     nodeY - nodeSize,     nodeSize * 2,     nodeSize * 2,   ) }<\/code><\/pre>\n
       <\/p>\n
      \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043f\u0440\u043e\u043f\u0435 nodeCanvasObject<\/code>:<\/p>\n
       <\/p>\n
      \/\/ Graph\/NodeIcon.tsx import { useEffect, useRef, useState } from 'react' import ForceGraph from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { drawNodeImage, generateGraphData } from '.\/utils'  const graphData = generateGraphData()  function NodeIcon() {   const spanRef = useRef<HTMLSpanElement>(null)   const [images, setImages] = useState<HTMLImageElement[]>([])    useEffect(() => {     if (!spanRef.current) return     const images = [...spanRef.current.querySelectorAll('img')]     setImages(images)   }, [])    return (     <Flex flexDirection='column' gap={12}>       <h3>\u0423\u0437\u0435\u043b \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/h3>       {\/* \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0445\u0430\u043a *\/}       <span         ref={spanRef}         style={{           display: 'none',         }}       >         {\/* \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043b\u0435\u0436\u0430\u0442 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 `public\/graph` *\/}         <img src='\/graph\/briefcase.svg' alt='' \/>         <img src='\/graph\/folder.svg' alt='' \/>         <img src='\/graph\/font.svg' alt='' \/>         <img src='\/graph\/paste.svg' alt='' \/>         <img src='\/graph\/user.svg' alt='' \/>       <\/span>       <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           nodeRelSize={6}           nodeCanvasObject={(node, ctx) => {             \/\/ \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435             const image = images[Number(node.id) % 5]              \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0435\u0433\u043e             drawNodeImage({ node, ctx, image })           }}           \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0443\u0437\u0435\u043b, \u0437\u0430\u0442\u0435\u043c - \u0438\u043a\u043e\u043d\u043a\u0443           nodeCanvasObjectMode={() => 'after'}         \/>       <\/Flex>     <\/Flex>   ) }  export default NodeIcon<\/code><\/pre>\n
       <\/p>\n
      \u0423\u0437\u0435\u043b \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044c\u044e<\/h3>\n
       <\/p>\n
      \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0443\u0437\u043b\u043e\u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438\u0441\u044c \u043d\u0435 \u0432 \u0442\u0443\u043b\u0442\u0438\u043f\u0435, \u0430 \u043f\u043e\u0434 \u0443\u0437\u043b\u0430\u043c\u0438? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0438\u0445 \u0432 Graph\/utils.ts<\/code>:<\/p>\n
       <\/p>\n
      export type DrawNodeLabelProps = {   \/\/ \u0423\u0437\u0435\u043b   node: NodeObject   \/\/ \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f   ctx: CanvasRenderingContext2D   \/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0438\u0306 \u043c\u0430\u0441\u0448\u0442\u0430\u0431   globalScale?: number   \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430   fontSize?: number   \/\/ \u041e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u0443\u0437\u043b\u0430   offset?: number   \/\/ \u0423\u0437\u043b\u044b \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover   hoverNodes?: (NodeObject | null)[]   \/\/ \u0412\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b   clickNodes?: (NodeObject | null)[]   \/\/ \u0420\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438   debug?: boolean }  \/\/ \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 export const defaultColors = {   nodeColor: '#827e7e',   activeNodeColor: '#1d75db',   labelColor: '#1a1818',   tooltipColor: '#f7ebeb', }  export const drawNodeLabel = ({   node,   ctx,   globalScale = 1,   fontSize = 6,   offset = 4,   hoverNodes = [],   clickNodes = [],   debug, }: DrawNodeLabelProps) => {   const { activeNodeColor, labelColor } = defaultColors    const nodeX = node.x || 0   const nodeY = node.y || 0   const nodeSize = Number(node.size) || defaultNodeSize    \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0442\u0435\u043a\u0441\u0442   const label = String(node.name) || ''   const _fontSize = fontSize \/ globalScale   ctx.font = `${_fontSize}px sans-serif`   ctx.textAlign = 'center'   ctx.textBaseline = 'middle'   const _labelColor = node.labelColor || labelColor   const labelActiveColor = node.labelActiveColor || activeNodeColor   \/\/ \u0426\u0432\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0443\u0437\u043b\u0430   ctx.fillStyle =     hoverNodes.includes(node) || clickNodes.includes(node)       ? labelActiveColor       : _labelColor   ctx.fillText(label, nodeX, nodeY + nodeSize + offset)    \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\/\u043a\u043b\u0438\u043a\u0430   const textWidth = ctx.measureText(label).width   const pointerArea = {     x: nodeX - textWidth \/ 2,     y: nodeY - nodeSize \/ 2 - offset \/ 2,     width: textWidth,     height: nodeSize + fontSize + offset,   }    \/\/ \u0415\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438   if (debug) {     \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\/\u043a\u043b\u0438\u043a\u0430     ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'     ctx.fillRect(       pointerArea.x,       pointerArea.y,       pointerArea.width,       pointerArea.height,     )   }    \/\/ \u0414\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 `drawNodePointerArea`   node.pointerArea = pointerArea }  export type NodePointerArea = {   x: number   y: number   width: number   height: number }  export type DrawNodePointerAreaProps = {   \/\/ \u0423\u0437\u0435\u043b   node: NodeObject   \/\/ \u0426\u0432\u0435\u0442   color: string   \/\/ \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f   ctx: CanvasRenderingContext2D }  export const drawNodePointerArea = ({   node,   color,   ctx, }: DrawNodePointerAreaProps) => {   ctx.fillStyle = color   const pointerArea: NodePointerArea = node.pointerArea   pointerArea &&     ctx.fillRect(       pointerArea.x,       pointerArea.y,       pointerArea.width,       pointerArea.height,     ) }<\/code><\/pre>\n
       <\/p>\n
      \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0438\u0445 \u0432 \u043f\u0440\u043e\u043f\u0435 nodeCanvasObject<\/code>:<\/p>\n
       <\/p>\n
      \/\/ Graph\/NodeWithLabel.tsx import ForceGraph from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { drawNodeLabel, drawNodePointerArea, generateGraphData } from '.\/utils'  const graphData = generateGraphData()  function NodeWithLabel() {   return (     <Flex flexDirection='column' gap={12}>       <h3>\u0423\u0437\u0435\u043b \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044c\u044e<\/h3>       <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u044c           nodeCanvasObject={(node, ctx) =>             drawNodeLabel({               node,               ctx,             })           }           \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0443\u0437\u0435\u043b, \u0437\u0430\u0442\u0435\u043c - \u043f\u043e\u0434\u043f\u0438\u0441\u044c           nodeCanvasObjectMode={() => 'after'}           \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\/\u043a\u043b\u0438\u043a\u0430           nodePointerAreaPaint={(node, color, ctx) =>             drawNodePointerArea({ node, color, ctx })           }           \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0443\u043b\u0442\u0438\u043f\u044b           nodeLabel='label'           linkLabel='label'         \/>       <\/Flex>     <\/Flex>   ) }  export default NodeWithLabel<\/code><\/pre>\n
       <\/p>\n
      \u0423\u0437\u0435\u043b \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover<\/h3>\n
       <\/p>\n
      \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0433\u0440\u0430\u0444 \u0441 \u0443\u0437\u043b\u0430\u043c\u0438 \u0438 \u0440\u0435\u0431\u0440\u0430\u043c\u0438, \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u043e\u043c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c \u0443\u0437\u0435\u043b, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0435\u0433\u043e \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u0438 \u0440\u0435\u0431\u0440\u0430. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e \u0440\u0435\u0431\u0440\u043e, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438 \u0446\u0435\u043b\u044c (\u0432\u0435\u0440\u0448\u0438\u043d\u044b).<\/p>\n
       <\/p>\n
      \/\/ Graph\/Hover.tsx import { useState } from 'react' import ForceGraph, {   type LinkObject,   type NodeObject, } from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { defaultColors, generateGraphData } from '.\/utils'  const graphData = generateGraphData() \/\/ \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0437\u0435\u043b, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0435\u0433\u043e \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u0438 \u0440\u0435\u0431\u0440\u0430 graphData.links.forEach((link) => {   if (typeof link.source === 'undefined' || typeof link.target === 'undefined')     return   const a = graphData.nodes[link.source as number]   const b = graphData.nodes[link.target as number]    if (!a || !b) return   \/\/ \u0421\u043e\u0441\u0435\u0434\u0438 \u0443\u0437\u043b\u0430   !a.neighbors && (a.neighbors = [])   !b.neighbors && (b.neighbors = [])   a.neighbors.push(b)   b.neighbors.push(a)    \/\/ \u0420\u0435\u0431\u0440\u0430 \u0443\u0437\u043b\u0430   !a.links && (a.links = [])   !b.links && (b.links = [])   a.links.push(link)   b.links.push(link) })  function Hover() {   \/\/ \u0423\u0437\u043b\u044b \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover   const [hoverNodes, setHoverNodes] = useState<(NodeObject | null)[]>([])   \/\/ \u0420\u0435\u0431\u0440\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover   const [hoverLinks, setHoverLinks] = useState<(LinkObject | null)[]>([])   \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0431\u0435\u0440 \u0443\u0437\u043b\u0430   const [links, setLinks] = useState(false)   \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0435\u0434\u0435\u0438\u0306 \u0443\u0437\u043b\u0430   const [neighbors, setNeighbors] = useState(false)   \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438 \u0446\u0435\u043b\u0438 \u0440\u0435\u0431\u0440\u0430   const [nodes, setNodes] = useState(false)    const { nodeColor, activeNodeColor } = defaultColors    return (     <Flex flexDirection='column' gap={12}>       <h3>\u0423\u0437\u0435\u043b \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover<\/h3>       <Flex gap='$4' flexDirection='column'>         <fieldset>           <legend>\u0412\u0435\u0440\u0448\u0438\u043d\u0430<\/legend>           <Flex flexDirection='column' gap={8}>             <label>               <input                 type='checkbox'                 checked={links}                 onChange={(e) => setLinks(e.target.checked)}               \/>{' '}               \u0420\u0435\u0431\u0440\u0430             <\/label>             <label>               <input                 type='checkbox'                 checked={neighbors}                 onChange={(e) => setNeighbors(e.target.checked)}               \/>{' '}               \u0421\u043e\u0441\u0435\u0434\u0438             <\/label>           <\/Flex>         <\/fieldset>         <fieldset>           <legend>\u0420\u0435\u0431\u0440\u043e<\/legend>           <label>             <input               type='checkbox'               checked={nodes}               onChange={(e) => setNodes(e.target.checked)}             \/>{' '}             \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438 \u0446\u0435\u043b\u044c           <\/label>         <\/fieldset>       <\/Flex>        <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           onNodeHover={(node) => {             const newHoverNodes = [node]             const newHoverLinks: LinkObject[] = []             if (node) {               \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0431\u0435\u0440 \u0443\u0437\u043b\u0430               if (links) {                 newHoverLinks.push(...(node.links as LinkObject[]))               }               \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u0443\u0437\u043b\u0430               if (neighbors) {                 newHoverNodes.push(...(node.neighbors as NodeObject[]))               }             }             setHoverLinks(newHoverLinks)             setHoverNodes(newHoverNodes)           }}           onLinkHover={(link) => {             const newHoverLinks = [link]             const newHoverNodes: NodeObject[] = []             if (link) {               \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432 \u0440\u0435\u0431\u0440\u0430               if (nodes) {                 newHoverNodes.push(                   link.source as NodeObject,                   link.target as NodeObject,                 )               }             }             setHoverLinks(newHoverLinks)             setHoverNodes(newHoverNodes)           }}           nodeColor={(node) =>             hoverNodes.includes(node) ? activeNodeColor : nodeColor           }           linkColor={(link) =>             hoverLinks.includes(link) ? activeNodeColor : nodeColor           }           linkDirectionalArrowColor={(link) =>             hoverLinks.includes(link) ? activeNodeColor : nodeColor           }         \/>       <\/Flex>     <\/Flex>   ) }  export default Hover<\/code><\/pre>\n
       <\/p>\n
      \u0423\u0437\u0435\u043b \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044c\u044e \u0438 \u0442\u0443\u043b\u0442\u0438\u043f\u043e\u043c<\/h3>\n
       <\/p>\n
      \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0442\u0443\u043b\u0442\u0438\u043f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0443\u0437\u0435\u043b? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0435\u0435 \u0432 Graph\/utils.ts<\/code>:<\/p>\n
       <\/p>\n
      export type DrawNodeTooltipProps = {   \/\/ \u0423\u0437\u0435\u043b   node: NodeObject   \/\/ \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f   ctx: CanvasRenderingContext2D   \/\/ \u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430   tooltip: string   \/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0438\u0306 \u043c\u0430\u0441\u0448\u0442\u0430\u0431   globalScale?: number   \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430   fontSize?: number   \/\/ \u041e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u0443\u0437\u043b\u0430   offset?: number   \/\/ \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0438\u0306 \u043e\u0442\u0441\u0442\u0443\u043f   horizontalPadding?: number   \/\/ \u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0438\u0306 \u043e\u0442\u0441\u0442\u0443\u043f   verticalPadding?: number }  export const drawNodeTooltip = ({   node,   ctx,   tooltip,   globalScale = 1,   fontSize = 5,   offset = 7,   horizontalPadding = 8,   verticalPadding = 6, }: DrawNodeTooltipProps) => {   const { tooltipColor, labelColor } = defaultColors    const nodeX = node.x || 0   const nodeY = node.y || 0   const nodeSize = Number(node.size) || defaultNodeSize    \/\/ \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442   const _fontSize = fontSize \/ globalScale   ctx.font = `${_fontSize}px sans-serif`   ctx.textAlign = 'center'   ctx.textBaseline = 'middle'    \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a   const textWidth = ctx.measureText(tooltip).width   const tooltipContainerColor = node.labelColor || labelColor   ctx.fillStyle = tooltipContainerColor   ctx.fillRect(     nodeX - textWidth \/ 2 - horizontalPadding \/ 2,     nodeY - nodeSize - offset - verticalPadding \/ 2 - fontSize \/ 2,     textWidth + horizontalPadding,     fontSize + verticalPadding,   )    \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0442\u0435\u043a\u0441\u0442   const _tooltipColor = node.tooltipColor || tooltipColor   ctx.fillStyle = _tooltipColor   ctx.fillText(tooltip, nodeX, nodeY - nodeSize - offset) }<\/code><\/pre>\n
       <\/p>\n
      \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0435 \u0432 \u043f\u0440\u043e\u043f\u0435 nodeCanvasObject<\/code>:<\/p>\n
       <\/p>\n
      \/\/ Graph\/NodeWithLabelAndTooltip.tsx import { useState } from 'react' import ForceGraph, { type NodeObject } from 'react-force-graph-2d' import { Flex } from '..\/Flex' import {   defaultColors,   drawNodeLabel,   drawNodePointerArea,   drawNodeTooltip,   generateGraphData, } from '.\/utils'  const graphData = generateGraphData()  function NodeWithLabelAndTooltip() {   \/\/ \u0423\u0437\u0435\u043b \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover   const [hoverNode, setHoverNode] = useState<NodeObject | null>(null)    const { nodeColor, activeNodeColor } = defaultColors    return (     <Flex flexDirection='column' gap={12}>       <h3>\u0423\u0437\u0435\u043b \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044c\u044e \u0438 \u0442\u0443\u043b\u0442\u0438\u043f\u043e\u043c<\/h3>       <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           onNodeHover={(node) => {             setHoverNode(node)           }}           nodeCanvasObject={(node, ctx) => {             \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u044c             drawNodeLabel({               node,               ctx,               hoverNodes: [hoverNode],             })             \/\/ \u0415\u0441\u043b\u0438 \u0443\u0437\u0435\u043b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover             if (node === hoverNode) {               \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0442\u0443\u043b\u0442\u0438\u043f               drawNodeTooltip({                 node,                 ctx,                 tooltip: `\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u043a ${node.name}`,               })             }           }}           \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0443\u0437\u0435\u043b, \u0437\u0430\u0442\u0435\u043c - \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0438 \u0442\u0443\u043b\u0442\u0438\u043f           \/\/ (\u0434\u043b\u044f \u0443\u0437\u043b\u0430, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover)           nodeCanvasObjectMode={() => 'after'}           \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\/\u043a\u043b\u0438\u043a\u0430           nodePointerAreaPaint={(node, color, ctx) =>             drawNodePointerArea({ node, color, ctx })           }           \/\/ \u0426\u0432\u0435\u0442 \u0443\u0437\u043b\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f           nodeColor={(node) =>             node === hoverNode ? activeNodeColor : nodeColor           }           \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0442\u0443\u043b\u0442\u0438\u043f\u044b           nodeLabel='label'           linkLabel='label'         \/>       <\/Flex>     <\/Flex>   ) }  export default NodeWithLabelAndTooltip<\/code><\/pre>\n
       <\/p>\n
      \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432<\/h3>\n
       <\/p>\n
      \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0433\u0440\u0430\u0444 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u0443\u0437\u043b\u043e\u0432. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b \u0438 \u0438\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u043b\u0438\u0441\u044c \u0446\u0432\u0435\u0442\u043e\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0446\u0432\u0435\u0442\u043d\u044b\u043c \u043a\u043e\u043b\u044c\u0446\u043e\u043c \u0432\u043e\u043a\u0440\u0443\u0433 \u0443\u0437\u043b\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0435\u0435 \u0432 Graph\/utils.ts<\/code>:<\/p>\n
       <\/p>\n
      export type DrawNodeRingProps = {   \/\/ \u0423\u0437\u0435\u043b   node: NodeObject   \/\/ \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f   ctx: CanvasRenderingContext2D   \/\/ \u041e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u0443\u0437\u043b\u0430   offset?: number   \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u043b\u0438\u043d\u0438\u0438   lineWidth?: number }  export const drawNodeRing = ({   node,   ctx,   offset = 5,   lineWidth = 1, }: DrawNodeRingProps) => {   const { activeNodeColor } = defaultColors   const nodeX = node.x || 0   const nodeY = node.y || 0   const nodeSize = Number(node.size) || defaultNodeSize   ctx.beginPath()   ctx.arc(nodeX, nodeY, nodeSize + offset, 0, 2 * Math.PI)   ctx.lineWidth = lineWidth   const ringColor = node.activeColor || activeNodeColor   ctx.strokeStyle = ringColor   ctx.stroke() }<\/code><\/pre>\n
       <\/p>\n
      \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0435 \u0432 \u043f\u0440\u043e\u043f\u0435 nodeCanvasObject<\/code>:<\/p>\n
       <\/p>\n
      \/\/ Graph\/Click.tsx import { useCallback, useState } from 'react' import ForceGraph, { type NodeObject } from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { defaultColors, drawNodeRing, generateGraphData } from '.\/utils'  const graphData = generateGraphData()  function Click() {   \/\/ \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b   const [clickNodes, setClickNodes] = useState<(NodeObject | null)[]>([])   \/\/ \u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0443\u0437\u043b\u043e\u0432   const [multiple, setMultiple] = useState(false)    const handleNodeClick = useCallback(     (node: NodeObject) => {       if (!multiple) {         setClickNodes([node])         return       }       let newClickNodes = [...clickNodes]       if (newClickNodes.includes(node)) {         newClickNodes = newClickNodes.filter((n) => n !== node)       } else {         newClickNodes.push(node)       }       setClickNodes(newClickNodes)     },     [clickNodes, multiple],   )    const { nodeColor, activeNodeColor } = defaultColors    return (     <Flex flexDirection='column' gap={12}>       <h3>\u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432<\/h3>       <fieldset>         <legend>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/legend>         <label>           <input             type='checkbox'             checked={multiple}             onChange={(e) => setMultiple(e.target.checked)}           \/>{' '}           \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0435\u0440\u0448\u0438\u043d         <\/label>       <\/fieldset>       <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           onNodeClick={handleNodeClick}           nodeCanvasObject={(node, ctx) => drawNodeRing({ node, ctx })}           \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043a\u043e\u043b\u044c\u0446\u043e \u0432\u043e\u043a\u0440\u0443\u0433 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0437\u043b\u043e\u0432           nodeCanvasObjectMode={(node) =>             clickNodes.includes(node) ? 'before' : undefined           }           \/\/ \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0444\u043e\u043d\u0443 \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b           onBackgroundClick={() => {             setClickNodes([])           }}           nodeColor={(node) =>             clickNodes.includes(node) ? activeNodeColor : nodeColor           }           \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432           enableNodeDrag={false}         \/>       <\/Flex>     <\/Flex>   ) }  export default Click<\/code><\/pre>\n
       <\/p>\n
      \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b<\/h3>\n
       <\/p>\n
      \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043b\u044b, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0443\u0437\u043b\u044b, \u043a\u0430\u043a-\u0442\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u043b\u0438\u0441\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u043f\u043b\u044e\u0441\u0430, \u0430 \u0432 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u043e\u043c \u2014 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u043c\u0438\u043d\u0443\u0441\u0430.<\/p>\n
       <\/p>\n
      \/\/ Graph\/Children.tsx import { useCallback, useEffect, useRef, useState } from 'react' import ForceGraph, {   type LinkObject,   type NodeObject, } from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { drawNodeImage } from '.\/utils'  type NodeObjectWithChildren = NodeObject & {   children?: NodeObject[] }  const initialGraphData: {   nodes: NodeObjectWithChildren[]   links: LinkObject[] } = {   nodes: [     {       id: 0,       name: 'node 0',     },     {       id: 1,       name: 'node 1',       children: [         {           id: 5,           name: 'node 5',         },         {           id: 6,           name: 'node 6',         },         {           id: 7,           name: 'node 7',         },       ],     },     {       id: 2,       name: 'node 2',     },     {       id: 3,       name: 'node 3',       children: [         {           id: 8,           name: 'node 8',         },         {           id: 9,           name: 'node 9',         },       ],     },     {       id: 4,       name: 'node 4',     },   ],   links: [     {       source: 1,       target: 0,       name: 'link 1',     },     {       source: 2,       target: 0,       name: 'link 2',     },     {       source: 3,       target: 1,       name: 'link 3',     },     {       source: 4,       target: 3,       name: 'link 4',     },   ], }  function Children() {   const spanRef = useRef<HTMLSpanElement>(null)   const [images, setImages] = useState<HTMLImageElement[]>([])    const [graphData, setGraphData] = useState(initialGraphData)   \/\/ \u0420\u0430\u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0443\u0437\u043b\u044b   const [expandedNodes, setExpandedNodes] = useState<NodeObject[]>([])    useEffect(() => {     if (!spanRef.current) return     const images = [...spanRef.current.querySelectorAll('img')]     setImages(images)   }, [])    const handleNodeClick = useCallback(     (node: NodeObject) => {       if (!node.children) return       \/\/ \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0443\u0437\u043b\u044b       let newExpandedNodes = [...expandedNodes]       if (!expandedNodes.includes(node)) {         newExpandedNodes.push(node)       } else {         newExpandedNodes = newExpandedNodes.filter((n) => n !== node)       }       setExpandedNodes(newExpandedNodes)       \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\/\u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0438 \u0440\u0435\u0431\u0440\u0430       let nodes = [...graphData.nodes]       let links = [...graphData.links]       const children: NodeObjectWithChildren[] = node.children       const childIds = children.map((n) => n.id)       if (!expandedNodes.includes(node)) {         nodes.push(...children)         const newLinks = children.map((n, i) => ({           id: links.length + i + 1,           source: n.id,           target: node.id,         }))         links.push(...newLinks)       } else {         nodes = nodes.filter((n) => !childIds.includes(n.id))         links = links.filter((l) => {           const sourceId = typeof l.source === 'object' ? l.source.id : l.source           return !childIds.includes(sourceId)         })       }       setGraphData({ nodes, links })     },     [expandedNodes, graphData],   )    return (     <Flex flexDirection='column' gap={12}>       {\/* \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0445\u0430\u043a *\/}       <span         ref={spanRef}         style={{           display: 'none',         }}       >         {\/* \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043b\u0435\u0436\u0430\u0442 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 `public\/graph` *\/}         <img src='\/graph\/plus.svg' alt='' \/>         <img src='\/graph\/minus.svg' alt='' \/>       <\/span>       <Flex width={768} height={480} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={480}           graphData={graphData}           nodeRelSize={6}           nodeCanvasObject={(node, ctx) => {             \/\/ \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0437\u043b\u044b \u0441 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438             if (node.children) {               \/\/ images[1] - \u0438\u043a\u043e\u043d\u043a\u0430 \u043c\u0438\u043d\u0443\u0441\u0430, images[0] - \u0438\u043a\u043e\u043d\u043a\u0430 \u043f\u043b\u044e\u0441\u0430               const image = expandedNodes.includes(node) ? images[1] : images[0]                drawNodeImage({ node, ctx, image })             }           }}           \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0443\u0437\u0435\u043b, \u0437\u0430\u0442\u0435\u043c - \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0438\u043a\u043e\u043d\u043a\u0443           nodeCanvasObjectMode={() => 'after'}           onNodeClick={handleNodeClick}         \/>       <\/Flex>     <\/Flex>   ) }  export default Children<\/code><\/pre>\n
       <\/p>\n
      \u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>\n
       <\/p>\n
      \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0433\u0440\u0430\u0444 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n
       <\/p>\n
      \/\/ Graph\/Toolkit.tsx import { useEffect, useRef, useState } from 'react' import ForceGraph, {   type ForceGraphMethods,   type LinkObject,   type NodeObject, } from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { generateGraphData } from '.\/utils'  const graphData = generateGraphData()  type NodeType = (typeof graphData.nodes)[number] type LinkType = (typeof graphData.links)[number]  function Toolkit() {   \/\/ \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431   const [currentZoom, setCurrentZoom] = useState(1)    const graphRef = useRef<     | ForceGraphMethods<NodeObject<NodeType>, LinkObject<NodeType, LinkType>>     | undefined   >()    \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430   useEffect(() => {     if (!graphRef.current) return     graphRef.current.zoom(currentZoom)   }, [currentZoom])    return (     <Flex flexDirection='column' gap={12}>       <h3>\u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>        <Flex         width={768}         height={480}         border='1px dashed rgba(0,0,0,0.25)'         position='relative'       >         <Flex           position='absolute'           top='50%'           transform='translateY(-50%)'           right={12}           zIndex={1}           flexDirection='column'           gap={8}           backgroundColor='gray'           padding={8}         >           <button             onClick={() => setCurrentZoom((currentZoom) => currentZoom + 0.5)}           >             \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c <br \/>             \u043c\u0430\u0441\u0448\u0442\u0430\u0431           <\/button>           <button             onClick={() => setCurrentZoom((currentZoom) => currentZoom - 0.5)}           >             \u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c <br \/>             \u043c\u0430\u0441\u0448\u0442\u0430\u0431           <\/button>           <button onClick={() => graphRef.current?.zoomToFit()}>             \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c <br \/>             \u0434\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430           <\/button>           <button onClick={() => graphRef.current?.centerAt(0, 0)}>             \u0412\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c <br \/>             \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443           <\/button>         <\/Flex>         <ForceGraph           ref={graphRef}           width={768}           height={480}           graphData={graphData}           \/\/ \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430),           \/\/ \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430,           \/\/ \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430           onZoomEnd={({ k }) => {             if (k !== currentZoom) {               setCurrentZoom(k)             }           }}           \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439           enableZoomInteraction={false}         \/>       <\/Flex>     <\/Flex>   ) }  export default Toolkit<\/code><\/pre>\n
       <\/p>\n
      \u041f\u043e\u0438\u0441\u043a<\/h3>\n
       <\/p>\n
      \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0433\u0440\u0430\u0444 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0443\u0437\u043b\u043e\u0432 \u0438 \u0440\u0435\u0431\u0435\u0440 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c \u0443\u0437\u043b\u043e\u0432.<\/p>\n
       <\/p>\n
      \/\/ Graph\/Search.tsx import { useEffect, useMemo, useState } from 'react' import ForceGraph from 'react-force-graph-2d' import { Flex } from '..\/Flex' import { drawNodeLabel, drawNodePointerArea, generateGraphData } from '.\/utils'  const { nodes, links } = generateGraphData(25)  const Search = () => {   \/\/ \u041e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0443\u0437\u043b\u044b   const [filteredNodes, setFilteredNodes] = useState(nodes)   \/\/ \u041e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0431\u0440\u0430   const [filteredLinks, setFilteredLinks] = useState(links)   \/\/ \u0421\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430   const [searchQuery, setSearchQuery] = useState('')   \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430   const [value, setValue] = useState('')    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {     e.preventDefault()     const query = value.trim().toLowerCase()     setSearchQuery(query)   }    useEffect(() => {     if (value === '') {       setSearchQuery('')     }   }, [value])    useEffect(() => {     if (!searchQuery) {       setFilteredLinks(links)       setFilteredNodes(nodes)       return     }      \/\/ \u0424\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u0443\u0437\u043b\u044b     const _nodes = nodes.filter((n) => {       const label = n.name as string       return label.toLowerCase().includes(searchQuery)     })     const nodeIds = _nodes.map((n) => String(n.id))     \/\/ \u0424\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u0440\u0435\u0431\u0440\u0430     const _links = links.filter((l) => {       const sourceId = typeof l.source === 'object' ? l.source.id : l.source       const targetId = typeof l.target === 'object' ? l.target.id : l.target        return (         nodeIds.includes(String(sourceId)) && nodeIds.includes(String(targetId))       )     })     setFilteredLinks(_links)     setFilteredNodes(_nodes)   }, [searchQuery])    const graphData = useMemo(     () => ({       nodes: filteredNodes,       links: filteredLinks,     }),     [filteredNodes, filteredLinks],   )    return (     <Flex flexDirection='column' gap={12}>       <h3>\u041f\u043e\u0438\u0441\u043a<\/h3>        <form         onSubmit={onSubmit}         style={{           display: 'flex',           alignSelf: 'center',         }}       >         <input           value={value}           onChange={(e) => setValue(e.target.value)}           placeholder='\u041f\u043e\u0438\u0441\u043a...'         \/>{' '}         <button>\u041f\u043e\u0438\u0441\u043a<\/button>       <\/form>       <Flex width={768} height={768} border='1px dashed rgba(0,0,0,0.25)'>         <ForceGraph           width={768}           height={768}           graphData={graphData}           nodeCanvasObject={(node, ctx) =>             drawNodeLabel({               node,               ctx,             })           }           nodeCanvasObjectMode={() => 'after'}           nodePointerAreaPaint={(node, color, ctx) =>             drawNodePointerArea({ node, color, ctx })           }           \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0443\u043b\u0442\u0438\u043f\u044b           nodeLabel='label'           linkLabel='label'         \/>       <\/Flex>     <\/Flex>   ) }  export default Search<\/code><\/pre>\n
       <\/p>\n
      \u276f \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n
       <\/p>\n
      \u041c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0435 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 react-force-graph-2d<\/a>, \u043d\u043e \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e react-force-graph-2d<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0435 \u0438 VR\/AR \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b.<\/p>\n
       <\/p>\n
      \u0414\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
       <\/p>\n
      https:\/\/react-graph.netlify.app\/<\/a><\/div>\n
       <\/p>\n
      \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
       <\/p>\n
      git clone https:\/\/github.com\/harryheman\/react-graph.git cd react-graph npm i npm run dev<\/code><\/pre>\n
       <\/p>\n
      Happy coding!<\/p>\n
       <\/p>\n\n
       <\/p>\n
      \u041d\u043e\u0432\u043e\u0441\u0442\u0438, \u043e\u0431\u0437\u043e\u0440\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u044b \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Timeweb.Cloud \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435<\/b><\/a> \u21a9<\/b><\/p><\/blockquote>\n
      <\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n
      <\/div>\n

       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438        https:\/\/habr.com\/ru\/articles\/917064\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
      <\/div>\n
      \n
      \n
      \n
       <\/p>\n
       <\/p>\n
       <\/p>\n
      \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n
       <\/p>\n
      \u0412 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u044f \u0434\u0435\u043b\u044e\u0441\u044c \u0441 \u0432\u0430\u043c\u0438 \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0438\u0437 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e.<\/p>\n
       <\/p>\n
      \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 react-force-graph-2d<\/a> \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u043e\u0432.<\/p>\n
       <\/p>\n
      \u0414\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
       <\/p>\n
      https:\/\/react-graph.netlify.app\/<\/a><\/div>\n
       <\/p>\n
      \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
       <\/p>\n
      git clone https:\/\/github.com\/harryheman\/react-graph.git cd react-graph npm i npm run dev<\/code><\/pre>\n
       <\/p>\n
      \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e? \u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0448\u0443 \u043f\u043e\u0434 \u043a\u0430\u0442.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-465821","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/465821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=465821"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/465821\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=465821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=465821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=465821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}