HTML 配置与布局

createRelationGraph(host, config) 接受 RGHtmlConfig：

type RGHtmlConfig = {
  options?: RGOptions;
  data?: RGJsonData;
  events?: RGListeners;
  renderers?: RGHtmlRenderers;
  layers?: RGHtmlLayers;
  plugins?: readonly RGHtmlPlugin[];
  ui?: {
    toolbar?: boolean | RGHtmlToolbarOptions;
    miniView?: boolean | RGHtmlMiniViewOptions;
    editing?: boolean | RGHtmlEditingOptions;
  };
  relationGraphCore?: new () => RelationGraphCore;
};

常用配置

const graph = await createRelationGraph('#graph', {
  options: {
    layout: {layoutName: 'tree', from: 'left'},
    defaultNodeWidth: 140,
    defaultNodeHeight: 54,
    defaultNodeBorderRadius: 6,
    defaultLineColor: '#8a949e',
    defaultLineWidth: 2,
    defaultLineShape: 6,
    showToolBar: true,
    showMiniView: true,
    wheelEventAction: 'zoom',
    dragEventAction: 'move',
    moveToCenterWhenRefresh: true,
    zoomToFitWhenRefresh: true
  },
  data,
  ui: {
    toolbar: true,
    miniView: {position: 'br', width: 220, height: 130}
  }
});

配置类别

类别	常用字段
视图	viewSize, backgroundColor, backgroundImage, fullscreenElementXPath
节点	defaultNodeWidth, defaultNodeHeight, defaultNodeShape, defaultNodeColor, defaultNodeBorderRadius
连线	defaultLineColor, defaultLineWidth, defaultLineShape, defaultJunctionPoint, defaultLineMarker
交互	wheelEventAction, dragEventAction, disableDragNode, disableZoom, disableDragCanvas
展开	defaultExpandHolderPosition, reLayoutWhenExpandedOrCollapsed
工具	showToolBar, toolBarDirection, toolBarPositionH, toolBarPositionV, showMiniView
性能	performanceMode, overviewMode, overviewEnterZoom, overviewExitZoom, maxDomNodes
刷新	moveToCenterWhenRefresh, zoomToFitWhenRefresh, useAnimationWhenRefresh

完整公共配置见图谱全局配置项。HTML 平台没有另一套配置语义，它直接使用核心 RGOptions。

内置布局

options: {
  layout: {
    layoutName: 'tree',
    from: 'left',
    levelDistance: 180,
    min_per_width: 120,
    max_per_width: 220
  }
}

layoutName	适用场景
fixed	使用数据中的 x、y 坐标
center	根节点居中、关系向外扩展
tree	单向或双向层级树
smart-tree	自动分析方向的关系树
folder	组织架构和紧凑目录树
circle	环形关系展示
force	网络和聚类关系

布局字段按布局类型有所不同。详细语义见内置布局算法。

运行时更新

graph.updateOptions({
  backgroundColor: '#10151b',
  defaultLineColor: '#a8b3bd'
});

await graph.setLayouter({
  layoutName: 'force',
  maxLayoutTimes: 300
});
graph.doLayout();

updateOptions() 只传变化字段。不要直接修改 graph.getOptions() 返回的只读视图。

EasyView 与性能模式

性能策略可以在大量节点或较小缩放比例时从 DOM/SVG 切换到 Canvas 概览。矩形节点的概览圆角取 node.borderRadius ?? defaultNodeBorderRadius ?? 5；投影圆角不足 3 CSS 像素时使用普通矩形，以减少绘制成本。

options: {
  performanceMode: 'auto',
  overviewMode: 'auto',
  maxDomNodes: 1200
}

下一页：数据、事件与 API。