基础库

初始化

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

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

节点

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

属性

定义

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

标题对齐方式

captionSize?: 数字

标题文本大小

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

标题文本和字体样式

color?: 字符串

节点使用的颜色

disabled?: 布尔值

当前节点是否被禁用

hovered?: 布尔值

当前节点是否被悬停

icon?: 字符串

在节点内显示的图标

id: 字符串

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

pinned?: 布尔值

当前节点是否被固定

selected?: 布尔值

当前节点是否被选中

size?: 数字

节点的大小

关系

关系必须具有唯一的 ID、一个**from**和一个**to**属性，这两个属性必须对应于图中现有的节点 ID。此外，可以指定以下属性

属性

定义

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

标题对齐方式

captionSize?: 数字

标题文本大小

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

标题文本和字体样式

color?: 字符串

关系使用的颜色

disabled?: 布尔值

当前关系是否被禁用

from: 字符串

关系开始的节点 ID

hovered?: 布尔值

当前关系是否被悬停

id: 字符串

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

to: 字符串

关系指向的节点 ID

width?: 数字

关系的宽度

选项

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

属性

定义

allowDynamicMinZoom?: 布尔值

是否动态允许在当前图形在最小缩放级别下无法显示在屏幕上时减小最小缩放值。请注意，当设置为 true 时，缩放和适配操作将允许进一步缩小到最小缩放值以下，如果图形无法在屏幕上显示。当设置为 false 时，缩放和适配操作将在最小缩放值处停止，即使图形在该缩放级别下无法完全显示在屏幕上。默认值为true。

intitalZoom?: 数字

当前视口的缩放值

layout?: "forcedirected" | "hierarchical"

要使用的图形布局算法。

maxZoom?: 数字

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

minZoom?: 数字

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

minimapContainer?: HTMLElement

渲染小地图的 DOM 容器

panX?: 数字

视口的初始平移 x 值

panY?: 数字

视口的初始平移 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 还提供了一系列交互处理程序。