乐趣区

关于数据可视化:从0到1实现流程图06连接状态篇

jiezi

开始

在手动连线的过程中，还须要解决一些交互细节，比方达到连贯桩左近主动吸附、可连贯元素的高亮显示等，侥幸的是这些都不须要咱们本人去实现，X6 提供了便当的配置形式帮咱们解决这些问题。

实现

连贯配置

当连线达到连贯桩左近时，咱们心愿连线会主动吸附到连贯桩下面，这样交互体验会更好：

const graph = new Graph({
  connecting: {
    snap: {radius: 20, // 离指标 20px 的时候主动吸附},
  }
})

当初拖动连线到空白处放开后，会生成一条起点在空白处的连线，这种连线在流程图中是有效的连线，所以心愿如果起点在空白处时，该连线主动隐没：

const graph = new Graph({
  connecting: {allowBlank: false}
})

在理论业务中还须要用户依据业务逻辑来定义连线有效性，X6 依据判断的先后顺序提供了三个办法：

办法 触发机会
validateMagnet 点击 magnet 元素时依据 validateMagnet 返回值判断是否新增边
validateConnection 拖拽连线的过程中依据 validateConnection 返回值判断是否能够连贯
validateEdge 当进行拖动边的时候依据 validateEdge 返回值来判断边是否失效，如果返回 false, 该边会被革除 
const graph = new Graph({
  connecting: {validateConnection({ targetMagnet}) {if (targetMagnet) {
        // 只能连贯 group 为 top 的连贯桩
        return targetMagnet!.getAttribute('port-group') === 'top'
      }
      return false
    }
  }
})

高亮配置

从上图咱们能够发现，当连贯桩能够被连贯的时候，当连线达到它左近时，会呈现高亮的成果，这个成果其实也是能够自定义的：

const graph = new Graph({
  highlighting: {
    magnetAdsorbed: {
      name: 'stroke',
      args: {
        attrs: {
          fill: '#D06269',
          stroke: '#D06269',
        },
      },
    }
  }
})

最初

X6 的很多性能都是从理论业务场景中积淀进去的，在一些交互细节的中央打磨的曾经足够润滑，然而还有一些不够好的中央，心愿能失去大家的反馈。

  1. 源码：传送门
  2. 记得给 X6 仓库加星
退出移动版