HTML 数据、事件与 API

初始数据

const data = {
  rootId: 'root',
  nodes: [
    {id: 'root', text: 'Root', x: 0, y: 0},
    {id: 'service', text: 'Service', data: {status: 'healthy'}}
  ],
  lines: [
    {id: 'root-service', from: 'root', to: 'service', text: 'calls'}
  ],
  fakeLines: []
};

const graph = await createRelationGraph('#graph', {data});

节点和连线都应使用稳定、唯一的字符串 id。from、to 指向节点 ID；业务字段放在 data 中。完整字段见节点数据、连线数据与 FakeLine。

数据 API

await graph.setJsonData(data);
await graph.appendJsonData(moreData);

graph.addNode({id: 'new', text: 'New'});
graph.addNodes(nodeList);
graph.addLine({id: 'new-line', from: 'root', to: 'new'});
graph.addLines(lineList);

graph.updateNode('new', {text: 'Updated'});
graph.updateNodeData('new', {status: 'warning'});
graph.updateLine('new-line', {color: '#dc2626'});

graph.removeNodeById('new');
graph.removeLineById('new-line');
graph.clearGraph();

查询 API 返回只读对象：

const node = graph.getNodeById('root');
const line = graph.getLineById('root-service');
const nodes = graph.getNodes();
const links = graph.getLinks();
const json = graph.getGraphJsonData();

不要直接修改查询结果；使用 update/add/remove API 保证索引、布局、MiniView 和渲染同步更新。

配置事件

需要参与默认行为或返回值判断的事件必须放在 config.events：

const graph = await createRelationGraph('#graph', {
  data,
  events: {
    onNodeClick(node, event) {
      console.log(node.id, event.type);
    },
    onLineClick(line, link, event) {
      console.log(line.id);
    },
    onNodeDragging(node, x, y) {
      return {
        x: Math.round(x / 10) * 10,
        y: Math.round(y / 10) * 10
      };
    },
    beforeZoomStart(zoom) {
      return zoom < 20 ? true : undefined;
    },
    beforeCreateLine({fromNode, toNode}) {
      return fromNode.id === toNode.id ? true : undefined;
    },
    onLineBeCreated({lineJson}) {
      graph.addLine(lineJson);
    }
  }
});

返回值语义包括：

• beforeZoomStart、beforeScrollStart、beforeCreateLine 返回 true 取消。
• beforeNodeResize 返回 false 拒绝当前尺寸应用。
• onNodeDragging、onCanvasDragging 可返回新坐标。

完整列表见事件系统大全。

DOM 镜像事件

根 DOM 会派发只读、可冒泡的 rg:* CustomEvent：

const host = document.querySelector('#graph');

host.addEventListener('rg:node-click', event => {
  console.log(event.detail.node.id);
  console.log(event.detail.graph === graph);
});

host.addEventListener('rg:viewport-change', event => {
  console.log(event.detail.canvasZoom);
});

常用事件包括 rg:ready、rg:node-click、rg:line-click、rg:canvas-click、rg:zoom-end、rg:view-resize、rg:viewport-change、rg:selection-change 和 rg:destroy。DOM 镜像事件不能通过返回值阻止核心行为。

状态订阅

const stopViewport = graph.subscribe('viewport', viewport => {
  console.log(viewport.canvasZoom, viewport.canvasOffset);
});

const stopSelection = graph.subscribe('selection', selection => {
  console.log(selection.checkedNodeId, selection.checkedLineId);
});

const stopEditing = graph.subscribe('editing', editingState => {
  console.log(editingState.nodes, editingState.line);
});

stopViewport();
stopSelection();
stopEditing();

订阅域是 options、viewport、selection、editing、renderPlan。

视图、布局和导出 API

graph.moveToCenter();
graph.zoomToFit();
graph.setZoom(120);
graph.zoom(10);
graph.focusNodeById('root');
graph.doLayout();
graph.toggleAutoLayout();
await graph.getGraphImageBase64('png');

实例还提供选择、展开收起、坐标转换、连线分析、全屏和截图等完整核心 API，见 RelationGraphInstance 公开接口。

下一页：Renderer、Layer 与 Plugin。