教程

您所在的位置：网站首页 › antv9em › 教程

教程

2024-07-11 01:51| 来源: 网络整理| 查看: 265

浏览 99 扫码分享 2023-05-07 10:24:21 概述准备工作绘制一个最简单的 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('HTML 节点'); return group.addShape('dom', { attrs: { x: 0, y: 0, width: 100, height: 24, html } }); } });

元素事件

可以使用以下两种方式将事件绑定到 dom 元素上：

绑定在自定义的 dom 元素上

使用 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 元素。

指标卡

若有收获，就点个赞吧

0 人点赞

【本文地址】

教程

教程

今日新闻

推荐新闻