antv x6连线与取消连线的操作+自定义连接桩+节点选择/框选

仙女爱吃鱼

已于 2023-06-19 14:46:16 修改

阅读量1.1w

点赞数 2

分类专栏：工具类文章标签：前端 javascript html

于 2022-08-30 11:49:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38318244/article/details/126600237

版权

本文介绍如何在AntV X6中实现自定义连线功能，包括定义不同类型的连接桩并控制其样式与数据，设置连线规则以确保只有相同类型的连接桩才能连接，以及在节点选择或框选时回传数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antv x6连线与取消连线的操作+自定义连接桩+节点选择/框选

我们的需求：给连接桩赋不同样式与数据代表不同类型，连线中只有相同类型的连接桩才可以相连,并且左边连接桩为输入，右边连接桩为输出，输入必须和输出相连，输出也只能和输入相连，每次选择节点后回传数据

在这里插入图片描述
假设我们的数据结构如下;

{
   
			"name": "python",
			"icon": "images/pythonScripts@2x.png",
			"icon1": "images1/pythonScripts@2x.png",
			"description": "",
			"category": "Scripts",
			"typeID": 3,
			"inputs": [
				{
   
					"name": "Data",
					"type": "DataType"
				},
				{
   
					"name": "Model",
					"type": "ModelType"
				}
			],
			"outputs": [
				{
   
					"name": "Data",
					"type": "DataType"
				},
				{
   
					"name": "Model",
					"type": "ModelType"
				}
			]
		},

然后我们先来看：

1.自定义连接桩

1.1定义连接桩位置及数据

let groups = {
   },
    items = [],
    inputs = type.inputs,
    outputs = type.outputs,
    name = type.name;

  if (inputs.length) {
   
    inputs.forEach((item, index) => {
   
      // 如果type为data类型
      if (item.type === "dataType") {
   
        groups.input1 = {
   
          position: {
   
            name: "absolute", // 连接桩固定属性
          },
          attrs: {
   
            fo: {
   
              magnet: "true", 
            },
            data: item, // 自定义与与节点/边关联的业务数据
          },
        };
        items.push({
   
          id: `${
     name}_input_${
     item.name}_${
     item.type}`, // 使用拼接字符串代表此连接桩属性
          group: "input1",
          args: {
    // 连接桩位置
            x: 0,
            y: 47,
            angle: 45,
          },
        });
      }
      // 如果type为model类型
      if (item.type === "<class 'sklearn.base.ClassifierMixin'>") {
   
        groups.input2 = {
   
          position: {
   
            name: "absolute",
          },
          attrs: {
   
            fo: {
   
              magnet: "true",
            },
            data: item, // 自定义与与节点/边关联的业务数据，为我们上方展示的数据结构
          },
        };
        items.push({
   
          id: `${
     name}_input_${
     item.name}_${
     item.type}`,
          group: "input2",
          args: {
   
            x: 0,
            y: 104,
            angle: 45,
          },
        });
      }
    });
  }

  if (outputs.length) {
   
    outputs.forEach((item, index) => {
   
      // 如果type为data类型
      if (item.type === "<class 'pandas.core.frame.DataFrame'>") {
   
        // console.log(123123123123123123123123123123123123123123);
        groups.output1 = {
   
          position: {
   
            name: "absolute",
          },
          attrs: {
   
            fo: {
   
              magnet: "true",
            },
            data: item, // 自定义与与节点/边关联的业务数据
          },
        };
        items.push({
   
          id: `${
     name}_output_${
     item.name}_${
     item.type

最低0.47元/天解锁文章