通常将组件放置在一个DIV元素中,其下包含多个节点,具有多层结构,每个层次显示特定的内容,首先是画布层(Graph Canvas),用于绘制图形元素(节点,连线等),接着是交互画布(Top Canvas),用于绘制交互过程中得界面效果,比如框选交互时呈现的半透明矩形框,最后是导航面板(Nav Panel),该面板包含上下左右四个按钮,当画面范围超出视口时,按钮会自动显示,用以表示画布范围,点击按钮可以平移画布。

Graph的DOM结构

<div>            - 组件所在父容器元素,graph.html

<div>            - 组件所在容器, graph.canvasPanel,画布和交互都添加在这个元素中

  <canvas /> - 画布层

  <canvas /> - 交互层

  <div />        - 导航面板

</div>

</div>

最外面是整个Graph组件对应的HTML元素,其下第一个孩子节点是主画布元素,用于绘制组件的图形主体(节点,连线,形状,分组等),另一个是顶层画布元素,用于辅助绘图,比如交互提示,框选矩形等。