概述

本文档主要介绍在 G6 中如何使用 dom 元素 ,如有描述不清楚、有误的地方欢迎大家在 GitHub 上提 Issue 指正,或是直接 PR 修缮。根据您的贡献度,我们会视情况将您加入 AntV 共建者名录 :-)

准备工作

HTML 元素只有在为 svg 渲染引擎下生效。若您需要在 G6 中使用 HTML 元素,请先将渲染引擎设置为 svg :
const graph = new G6.Graph({
  renderer: 'svg'
});

绘制一个最简单的 dom 图形

Demo 源码
  G6.registerNode('customNode', {
    draw(item){
      const group = item.getGraphicGroup();
      const html = G6.Util.createDOM('<div class="node">HTML 节点</div>');
      return group.addShape('dom', {
        attrs: {
          x: 0,
          y: 0,
          width: 100,
          height: 24,
          html
        }
      });
    }
  });

元素事件

可以使用以下两种方式将事件绑定到 dom 元素上:
  1. 绑定在自定义的 dom 元素上
  2. 使用 graph 委托事件
Demo 源码
  graph.on('node:click', ev=>{
    const { domEvent, item } = ev;
    const { target } = domEvent;
    if(target && target.dataset.text){
       alert('捕获了一只'+target.dataset.text);
    }
  });
第一种方法是原生的 javascript 事件。在第二种方式中,需要注意的是,由于内部事件是根据数学运算求得的,而 node:click 的监听区域是根据 addShape() 时设置的尺寸进行运算的,所以这类事件的响应是不会超出 shape 的尺寸的。

复杂示例

使用 dom 元素,我们能基于 HTML 、CSS 的特性轻易制作表单类、列表类,并使用高文本处理复杂的 UI。另一方面,开发者有能力快速复用其它 Web 组建。
注意 : 对于简单图形上, dom 元素的性能远不如 canvas 。在大数据量场景下,应尽量避免使用 dom 元素。

指标卡