交互处理程序

其基本形式是，基础库不提供任何图交互。NVL 提供交互处理程序类，可用于启用各种类型的交互性。

您可以使用以下命令安装 NVL 的交互处理程序

npm install @neo4j-nvl/interaction-handlers

如果您正在使用 React，可以考虑使用 InteractiveReactWrapper。

BoxSelectInteraction

用于多选节点和关系的交互处理程序。拖动光标时，它会在场景上绘制一个框，框内的所有节点和关系都会被选中。

import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const boxSelectInteraction = new BoxSelectInteraction(nvl)

boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
 console.log('Selected elements:', nodes, rels)
})

ClickInteraction

点击交互处理程序处理节点、关系和场景上的点击、双击和右键点击事件。

import { ClickInteraction } from '@neo4j-nvl/interaction-handlers',
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const clickInteraction = new ClickInteraction(nvl)
clickInteraction.updateCallback('onNodeClick', (node) => {
  console.log('Node clicked', node)
})

DragNodeInteraction

用于拖动节点的处理程序，通过点击并移动节点来实现。请注意，当选中多个节点时，它们都会被拖动。

import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const dragNodeInteraction = new DragNodeInteraction(nvl)

dragNodeInteraction.updateCallback('onDrag', (nodes) => {
  console.log('Dragged nodes:', nodes)
})

HoverInteraction

用于悬停节点和关系的交互处理程序。

import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const hoverInteraction = new HoverInteraction(nvl)

hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
 console.log('Hovered element:', element)
 console.log('Hit elements:', hitElements)
 console.log('Mouse event:', event)
})

LassoInteraction

一种交互处理程序，允许您通过在节点和关系周围绘制套索来选择它们。拖动时，场景上会绘制一条线，框内的所有元素都会被选中。

import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const lassoInteraction = new LassoInteraction(nvl)

lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
 console.log('Selected elements:', nodes, rels)
})

PanInteraction

用于平移场景的处理程序，通过点击并移动场景来实现。

import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const panInteraction = new PanInteraction(nvl)

panInteraction.updateCallback('onPan', (panning) => {
  console.log('Panning:', panning)
})

ZoomInteraction

用于缩放场景的处理程序，通过在场景上滚动鼠标滚轮来实现。

import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const zoomInteraction = new ZoomInteraction(nvl)

zoomInteraction.updateCallback('onZoom', (zoomLevel) => {
  console.log('Zoom level:', zoomLevel)
})
© . All rights reserved.