基础库

初始化

基础库是 NVL 的核心：一个与框架无关的 JavaScript 类，构造时需要五个参数——容器元素、节点数组、关系数组、可选的配置对象以及可选的回调函数。

下面是一个最小化的类型示例，展示典型的初始化

import { NVL } from '@neo4j-nvl/base'
import type { Node, Relationship, NvlOptions, ExternalCallbacks } from '@neo4j-nvl/base'

const nodes: Node[] = [{ id: '1' }, { id: '2' }]
const relationships: Relationship[] = [{ id: '12', from: '1', to: '2' }]
const options: NvlOptions = { initialZoom: 2.0 }
const callbacks: ExternalCallbacks = { onLayoutDone: () => console.log('layout done') }

const container = document.getElementById('container') as HTMLElement
const nvl = new NVL(container, nodes, relationships, options, callbacks)

以下是参数类型的细分。

节点

每个节点必须有一个 ID，且可以是任何唯一的字符串。节点可以包含可选属性，以自定义其外观和行为，例如标题、大小、颜色、图标等。完整的类型定义和所有可用属性请参见 Node 接口的 API 文档。

关系

关系必须拥有唯一的 ID、一个 from 和一个 to 属性，这些属性必须对应图中已存在的节点 ID。此外，还可以指定诸如标题、宽度、颜色等属性。完整的类型定义和所有可用属性请参见 Relationship 接口的 API 文档。

选项

NVL 接受一个 options 对象，用于控制布局、缩放/平移限制、渲染器选择、小地图容器以及其他行为。常见的选项包括布局类型、初始/最小/最大缩放，以及渲染器选择。完整的选项列表和默认值请参见 NvlOptions 的 API 文档。

回调函数

NVL 提供生命周期和错误事件的回调钩子（例如：onError、onLayoutComputing、onLayoutDone 等）。有关 ExternalCallbacks 的精确签名，请参阅 API 文档。

交互性

为了与图交互，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 类公开了一组实例方法，用于检查和操作场景（添加/删除/更新元素、控制缩放/平移、查询命中和选择、更改布局、保存图片等）。完整的方法列表和精确签名请参见 NVL 类的 API 文档。

以下示例演示在点击节点时选中节点，在场景空白处点击时取消选中节点

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 还提供了一系列交互处理程序。