使用 dom 元素

概述

本文档主要介绍在 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 元素。

指标卡