刘一帆的博客

【代码】react19设计AntVX6 人工智能建模 DAG 图。

简述：本文通过理解官方文档进行编写，实现官方的示例效果。实现结果如下：代码解析：代码解释为onMounted初始化页面顺序进行讲解。

效果图如下：（连接线是有动画的，模拟数据传输特效）在全局注册连接线特效，方便AntVX6检测到样式。

通过思索，其实也就是把坐标原点的定位移至中心即可，那么就是节点的大小（代码里的nodewidth喝nodeheight），这个大小根据后续添加的节点自我设置，然后减去X轴和Y轴减去他们的一半即可。方案是根据pageToLocal进行位置计算，但是每次的原点都是在左上角 ，因为SVG坐标系是以左上角为原点，导致放置的地方就会有偏差。以下是未优化的版本（在第一篇文章有讲解）

以下为官方提供的节点形状：以下为图片形状的设计代码：首先设置shape为image，让节点为图片状，而后在markup上注册image区域（因为有后续自定义需要所以定义了markup，不定义也可以，但是需删除markup字段）。而后设置图片的路径，并且定义自定义标签，此处在外部定义label，会导致而后所有在markup上注册的text都为相同的标签，但是可以在attrs自定义标签，并用selector选择器进行选择即可解决。