ETL平台搭建跳坑系列之jsplumb.js使用

最新推荐文章于 2024-08-16 21:15:52 发布

一只开心的前端小白

最新推荐文章于 2024-08-16 21:15:52 发布

阅读量895

点赞数

文章标签： ETL jsplumb.js

本文链接：https://blog.csdn.net/qq_36872856/article/details/84302542

版权

本文介绍了使用jsplumb.js在ETL平台搭建过程中实现的拖拽节点、设置节点可动、删除节点和链接等功能，并分享了遇到的删除单条连线错误及其解决策略。

摘要由CSDN通过智能技术生成

目前已经实现基于jsplumb.js的部分功能：拖拽生成节点（含anchor），设置节点可动，删除节点，删除链接，获取所有链接信息等
之后会对功能进行完善。

//添加节点

 function addNode(parentId, nodeId, nodeLable, position) {
    var panel= d3.select("#" +parentId);
    panel.append('div').style('width','120px').style('height','50px')
      .style('position','absolute')
      .style('top',position.y).style('left',position.x)
      .style('border','2px#9DFFCA solid').attr('align','center')
      .attr('id',nodeId).classed('node',true)
      .text(nodeLable);
    return jsPlumb.getSelector('#' + nodeId);//不能为纯数字
  }

//添加端口

function addPorts(instance,node, ports, type) {
    //Assumehorizental layout
    var number_of_ports= ports.length;
    var i = 0;
    var height =$(node).height();  //Note, j