关于数据可视化:从0到1实现流程图应用03图形篇

开始

在流程图中咱们须要通过拖拽交互往画布中增加节点，X6 不仅内置了弱小的拖拽性能，还内置了很多罕用的图形，接下来咱们一起实现根底的流程图图形以及图形拖拽性能。

实现

图形定义

首先来看下一个简略的矩形节点的根底配置：

graph.addNode({
  shape: 'rect',
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  attrs: {
    body: {stroke: 'red'}
  }
})

shape：定义图形的形态，X6 内置了 rect、circle、ellipse、polygon、polyline、image、html 等根底形态
x/y：定义图形的左上角坐标
width/height：定义图形的尺寸
看到 attrs 大家可能比拟奇怪，这是什么货色？其实能够将 attrs 看做 css 款式汇合，其中 body 相似于 css 选择器，body 的值是被选中元素的属性。那 body 又是哪来的呢？这里就要说的另一个重要的配置项 markup，markup 示意的是图形的 DOM 构造，内置的 rect 的默认 markup 为：

[
  {
    tagName: 'rect',
    selector: 'body',
  },
  {
    tagName: 'text',
    selector: 'label',
  },
]

渲染实现后，理论失效的 DOM 为：

<g data-cell-id="ca715562-8faf-4c88-a242-2b18d4ce47a6" data-shape="rect" class="x6-cell x6-node" transform="translate(100,100)">
  <rect fill="#ffffff" stroke="red" stroke-width="2" width="80" height="40"></rect>
  <text font-size="14" fill="#000000" text-anchor="middle" text-vertical-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,40,20)"></text>
</g>

所以说一个图形是由 markup 和 attrs 来决定构造和款式，咱们能够通过设置 markup 和 attrs 来定义本人业务中的图形，看上面的例子：

graph.addNode({
  shape: 'rect',
  x: 60,
  y: 60,
  width: 70,
  height: 70,
  markup: [
    {
      tagName: 'rect',
      selector: 'r1'
    },
    {
      tagName: 'circle',
      selector: 'c1'
    },
    {
      tagName: 'circle',
      selector: 'c2'
    },
    {
      tagName: 'circle',
      selector: 'c3'
    },
    {
      tagName: 'circle',
      selector: 'c4'
    }
  ],
  attrs: {
    r1: {
      width: 70,
      height: 70,
      stroke: '#ccc',
      rx: 12,
      ry: 12,
    },
    c1: {
      r: 10,
      cx: 20,
      cy: 20,
      fill: '#000'
    },
    c2: {
      r: 10,
      cx: 50,
      cy: 20,
      fill: '#000'
    },
    c3: {
      r: 10,
      cx: 20,
      cy: 50,
      fill: '#000'
    },
    c4: {
      r: 10,
      cx: 50,
      cy: 50,
      fill: '#000'
    },
  }
})

下面能够看到定义图形的时候，属性是固定写死的，在业务场景中，常常须要动静批改节点的款式，X6 中也提供了十分便当的办法：

const node = graph.addNode({
    shape: 'rect',
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  attrs: {
    body: {stroke: 'red'}
  }
})
node.attr('body/stroke', 'green')
node.attr('body/fill', 'yellow')

咱们的图形将会变成上面这样：

那么问题来了，如果多个图形的构造和款式类似度很高，每次定义图形都要写很多相似的代码，有没有一种形式能够将图形之间的公共属性形象进去呢？X6 提供了很优雅的形式来解决这个问题，首先注册自定义的节点类型，在这里配置公共的属性，而后在增加节点的时候指定 shape 值为方才注册的节点类型。

Graph.registerNode('custom-rect', {
  inherit: 'rect', // 继承自 Shape.Rect
  width: 300, // 默认宽度
  height: 40, // 默认高度
  attrs: {
    body: {
      rx: 10, // 圆角矩形
      ry: 10,
      strokeWidth: 1,
      fill: '#5755a1',
      stroke: '#5755a1',
    },
    label: {
      fill: '#fff',
      fontSize: 18,
      refX: 10, // x 轴偏移，相似 css 中的 margin-left
      textAnchor: 'left', // 左对齐
    }
  },
})
 
graph.addNode({
  shape: 'custom-rect',
  x: 50,
  y: 50,
  width: 100,
  height: 50,
  label: 'rect1'
})
graph.addNode({
  shape: 'custom-rect',
  x: 200,
  y: 50,
  width: 100,
  height: 50,
  label: 'rect2',
  attrs: {
    body: {fill: '#ccc'}
  }
})

图形拖拽

图形定义好了，接下来咱们要实现图形拖拽性能，X6 提供了 Dnd 插件来提供根底的拖拽能力，并在 Dnd 根底上的进一步封装，提供了一个相似侧边栏的 UI 组件 Stencil，反对分组、折叠、搜寻等能力。
首先提供一个 Stencil 的容器：

<!-- stencil 容器须要设置 position:relative 的款式 -->
<div id="stencil" style="position:relative"></div>

而后进行初始化（具体配置见官网）：

const stencil = new Addon.Stencil({
  title: 'Flowchart',
  target: this.graph,
  stencilGraphWidth: 214,
  stencilGraphHeight: document.body.offsetHeight - 105,
  layoutOptions: {
    columns: 4,
    columnWidth: 48,
    rowHeight: 30,
    marginY: 30,
  },
})
const stencilContainer = document.querySelector('#stencil')
if (stencilContainer) {stencilContainer.appendChild(stencil.container)
}

而后将咱们定义的图形加载到 stencil 中：

const r1 = graph.createNode({
  shape: 'rect',
  width: 30,
  height: 15,
})
stencil.load([r1])

当咱们将图形拖拽到画布的时候，想将 Stencil 中的图形等比例放大。查看官网，拖拽的流程为：

1. 拖拽过程中能够在 getDragNode 中返回新的节点来自定义拖拽节点款式
2. 拖拽完结能够在 getDropNode 中返回新的节点来自定义搁置在画布中节点款式

上面的代码就是将拖拽节点等比例放大 3 倍后搁置到画布中：

const stencil = new Addon.Stencil({getDropNode(node) {const size = node.size()
    return node.clone().size(size.width * 3, size.height * 3)
  }
})

最终成果：

最初

X6 不仅反对上文提到的根底的 SVG 节点，还具备在节点中渲染 React、Vue 组件的能力。在理论业务场景中，如果对 SVG 不相熟或者节点内容简单，咱们能够依据技术栈抉择 React/Vue 渲染，这样在节点外部，咱们能够用相熟的形式绘制各种简单的内容，堪称随心所欲。

1. 源码：传送门
2. 记得给 X6 仓库加星