基础库

初始化

基础库是 NVL 的基础。它是一个与框架无关的 JavaScript 类。它接受五个参数：

渲染容器
节点数组
关系数组
选项对象
包含回调的对象

节点

每个节点都必须有一个 ID，它可以是任何唯一的字符串。此外，还可以提供以下可选属性：

属性

定义

captionAlign?: "center" | "top" | "bottom"

标题对齐方式

captionSize?: number

标题文本大小

captions?: { styles?: ("bold" | "italic")[], value: string }[]

标题文本和字体样式

color?: string

用于节点的颜色。支持所有有效的网页颜色。

disabled?: boolean

当前节点是否被禁用

hovered?: boolean

当前节点是否被悬停

icon?: string

在节点内显示的图标

id: string

当前节点的 ID，在所有节点和关系中必须唯一，且必须是字符串，不能为空。

pinned?: boolean

当前节点是否被固定

selected?: boolean

当前节点是否被选中

size?: number

节点的大小

关系

关系必须有一个唯一的 ID，以及一个 from 和一个 to 属性，这些属性必须对应图中现有的节点 ID。此外，还可以指定以下属性：

属性

定义

captionAlign?: "center" | "top" | "bottom"

标题对齐方式

captionSize?: number

标题文本大小

captions?: { styles?: ("bold" | "italic")[], value: string }[]

标题文本和字体样式

color?: string

用于关系的颜色。支持所有有效的网页颜色。

disabled?: boolean

当前关系是否被禁用

from: string

关系开始的节点 ID

hovered?: boolean

当前关系是否被悬停

id: string

当前关系的 ID，在所有节点和关系中必须唯一，且必须是字符串，不能为空。

to: string

关系指向的节点 ID

width?: number

关系的宽度

选项

以下是可指定的选定选项列表。

属性

定义

allowDynamicMinZoom?: boolean

是否动态允许在当前图在最小缩放级别下无法完全显示时，减小最小缩放值。请注意，当设置为 true 时，如果图无法完全显示，缩放和适应操作将允许缩放出比最小缩放值更远的范围。当设置为 false 时，缩放和适应操作将停在最小缩放值，即使整个图在该缩放级别下无法完全显示。默认值为 true。

intitalZoom?: number

当前视口的缩放值

layout?: "forcedirected" | "hierarchical"

要使用的图布局算法。

maxZoom?: number

允许的最大缩放级别。默认值为 10。

minZoom?: number

允许的最小缩放级别。默认值为 0.075。

minimapContainer?: HTMLElement

用于渲染小地图的 DOM 容器

panX?: number

视口的初始平移 X 值

panY?: number

视口的初始平移 Y 值

renderer?: "webgl" | "canvas"

要使用的渲染器方法

回调

可以指定以下回调：

属性

定义

onError?: ((error: Error) ⇒ void)

NVL 初始化后抛出错误时触发

onLayoutComputing?: ((isComputing: boolean) ⇒ void)

当异步布局计算开始/停止时触发

onLayoutDone?: (() ⇒ void)

布局移动完成后触发

onLayoutStep?: ((p: Node[]) ⇒ void)

在布局的每一步触发

onWebGLContextLost?: ((webGLContextEvent: WebGLContextEvent) ⇒ void)

WebGL 上下文丢失时触发

交互性

为了与图进行交互，NVL 提供了方法来获取被指针事件命中的节点和关系。该方法接受一个事件，并返回带有 HitTargets 属性的事件，其中包含被事件命中的节点和关系。这是一个基本示例：

import { NVL } from '@neo4j-nvl/base'
const container = document.getElementById('frame')
const nodes = [{ id: '1' }, { id: '2' }]
const relationships = [{ id: '12', from: '1', to: '2' }]
const nvl = new NVL(container, nodes, relationships)

// Get the nodes and relationships that have been hit by a pointer event.
container.addEventListener('click', (evt) => {
  const { nvlTargets } = nvl.getHits(evt)
  console.log('clicked elements:', nvlTargets)
})

根据事件类型，您可以通过方法对 NVL 进行更新。以下 NVL 方法可用：

方法

定义

addAndUpdateElementsInGraph

向 NVL 添加节点和关系，并更新现有节点和关系

addElementsToGraph

在当前场景中添加节点和关系

currentOptions

返回当前选项

deselectAll

取消选择所有节点和关系

destroy

从 DOM 中移除图可视化并清理所有内容

fit

更新平移和缩放以使指定节点适应视口

getContainer

提供图表渲染所在的 DOM 容器元素

getCurrentOptions

返回当前选项

getHits

获取被事件命中的节点和关系

getNodeById

返回给定 ID 当前存储在场景中的节点数据

getNodePosition

获取并返回所有节点的当前位置，作为坐标数组

getNodes

返回当前存储在场景中的数据

getNodesOnScreen

返回当前场景中的节点

getPan

返回视口当前平移值

getPositionById

返回给定 ID 当前存储在场景中的节点位置

getRelationshipById

返回给定 ID 当前存储在场景中的关系数据

getRelationships

返回当前场景中的关系

getScale

获取视口当前的缩放级别

getSelectedNodes

获取当前选中的节点

getSelectedRelationships

获取当前选中的关系

isLayoutMoving

检查并返回当前布局是否仍在调整中

pinNode

固定指定节点，使其不受布局力影响

removeNodesWithIds

从当前场景中移除指定节点

removeRelationshipsWithIds

从当前场景中移除指定关系

resetZoom

将视口缩放重置回默认缩放级别 0.75

restart

重启 NVL 实例

saveFullGraphToLargeFile

将整个场景保存为 .png 文件到客户端

saveToFile

将场景的当前视图保存为 .png 文件到客户端

setLayout

更改布局类型

setLayoutOptions

更新当前布局的配置

setNodePositions

根据提供的数据设置节点位置

setPan

将视口的缩放设置为特定值

setUseWebGLRenderer

在 WebGL 和 Canvas 渲染之间切换

setZoom

将视口的缩放设置为特定值

setZoomAndPan

将视口的缩放和平移设置为特定值

unPinNode

取消固定指定节点，使其再次受布局力影响

updateElementsInGraph

使用提供的节点和关系数组更新当前场景中的关系

以下是一个示例，展示了在点击节点时选中节点，以及在点击场景空白区域时取消选中节点。

const nodes = [{ id: '0' }, { id: '1' }]
const rels = [{ id: '10', from: '0', to: '1' }]

const myNvl = new NVL(parentContainer, nodes, rels)

parentContainer.addEventListener('click', (e) => {
    const { nvlTargets } = myNvl.getHits(e)
    if (nvlTargets.nodes.length > 0) {
      myNvl.addAndUpdateElementsInGraph([{ id: nvlTargets.nodes[0].data.id, selected: true }], [])
    } else {
      myNvl.addAndUpdateElementsInGraph(
        nodes.map((node) => ({ ...node, selected: false })),
        []
      )
    }
})

如果您不想从头开始实现传统的图交互行为，NVL 还提供了一系列交互处理程序。