乐趣区

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

jiezi

开始

很多图形都有连贯桩的概念，连贯桩是节点上固定的点，罕用于连线。连贯桩的应用形式非常灵活，本文只介绍最佳实际。

实现

连贯桩定义

首先来看一个节点周围核心各一个连贯桩的节点配置：

graph.addNode({
  ports:{
    groups: {
      group1: {
        position: 'top',
        attrs: {
          circle: {
            stroke: '#D06269',
            strokeWidth: 1,
            r: 4,
            magnet: true
          }
        }
      },
      group2: {
        position: 'right',
        attrs: {
          circle: {
            stroke: '#D06269',
            strokeWidth: 1,
            r: 4,
            magnet: true
          }
        }
      },
      group3: {
        position: 'bottom',
        attrs: {
          circle: {
            stroke: '#D06269',
            strokeWidth: 1,
            r: 4,
            magnet: true
          }
        }
      },
      group4: {
        position: 'left',
        attrs: {
          circle: {
            stroke: '#D06269',
            strokeWidth: 1,
            r: 4,
            magnet: true
          }
        }
      }
    },
    items: [{ group: 'group1'},
      {group: 'group2'},
      {group: 'group3'},
      {group: 'group4'}
    ]
  }
})


上面具体解释下面要害配置项：

  1. group：group 选项来设置链接桩分组，使该组中的链接桩具备雷同的行为和款式，在 items 外面增加连贯桩的时候，能够指定该连贯桩属于哪个分组。
  2. position：每一个分组内能够配置连贯桩的地位属性，地位反对相对定位以及均匀分布定位，具体配置可参考 PortLayout。

  3. attrs：这里又呈现 attrs 了，那么必然有与其配对的 markup，连贯桩默认的 markup 为：

    {
  tagName: 'circle',
  selector: 'circle',
  attrs: {
    r: 10,
    fill: '#fff',
    stroke: '#000',
  },
}

    markup 定制连贯桩的构造，attrs 定制连贯桩的款式，留神，只有设置 magnet: true 属性的连贯桩能力手动连线。

  4. items：group 只是定义了连贯桩分组，也就是 group1、group2、group3、group4 别离长成什么样子，真正配置须要哪些连贯桩的是 items 属性，items 的配置如下：

    {
  id: 'id1',
  group: 'group1',
  markup: undefined,
  attrs: undefined,
}

    如果 id 不设置，会主动生成惟一 id，如果手动设置，记住，必须保障全局惟一，否则会产生不可预期的谬误。在 items 中配置的 markup 或 attrs 会和所属 group 中的配置深度合并。

    动静批改属性

    那么怎么动静批改连贯桩的属性呢？在后面的节点和连线中咱们晓得，动静批改款式应用的是 attr 办法，那么 attr 办法的原理是什么呢？
    通过浏览源码晓得，attr 办法其实是一个批改节点或边中 store/data/attrs 中数据的快捷办法。

从上图可知，ports 相干的配置并不处于 attrs 属性外部，所以批改连贯桩的配置不能应用 attr 办法，那只有应用更通用的 prop 办法, prop 能够用来批改 store/data 中的任意数据，例如，须要批改第一个连贯桩的边框色彩为红色：

node.prop('ports/items/0/attrs/circle', { stroke: 'red'})

这么写会显得特地简短，X6 提供了更简略一点的办法：

node.portProp('portId', 'attrs/circle', { stroke: 'red'})

显示 / 暗藏

在业务场景中，常常须要鼠标移入节点时显示连贯桩、鼠标移出节点时暗藏连贯桩的性能。这里就要波及到 X6 的事件零碎，X6 中基本上所有操作都会触发对应的事件，不便用户解决本人的逻辑，具体内容见 Events。实现这个性能，咱们能够：监听节点的鼠标移入和移出事件，而后通过款式来显示 / 暗藏连贯桩，这就是基于 SVG 的一个非常明显的劣势，咱们能够应用相熟的 DOM 操作来操作 SVG 元素。

function showPorts(ports, show) {for (let i = 0, len = ports.length; i < len; i = i + 1) {ports[i].style.visibility = show ? 'visible' : 'hidden'
  }
}

graph.on('node:mouseenter', () => {const ports = container.querySelectorAll('.x6-port-body')
  this.showPorts(ports, true)
})

graph.on('node:mouseleave', () => {const ports = container.querySelectorAll('.x6-port-body')
  this.showPorts(ports, false)
})

最初

基于 SVG 的图框架最大的劣势在于咱们能够应用相熟的解决 HTML 元素的思维形式来解决 SVG 元素的交互，因为能够应用 DOM API 来操作 SVG 元素，咱们就能够实现很多交互细节，而图编辑利用的难点往往就在于这些交互细节。

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