乐趣区

关于数据可视化:从0到1实现流程图07工具篇

jiezi

开始

一个开箱即用的技术框架，肯定会有齐备的配套工具。X6 提供了大量的图编辑性能，它们基本上都是基于配置式，而且配置参数是通过大量业务实际进去的，开发过程中充分考虑可扩展性以及兼容性，能笼罩到大部分的性能场景。

实现

节点缩放

通过拖拽批改节点的尺寸和旋转角度是常见性能，在 X6 中只须要做简略的配置：

const graph = new Graph({
  resizing: true,
  rotating: true,
})

还能够通过 css 来批改操作元素的默认款式：

.x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239EDD;
  > div {border: 1px solid #239EDD;}
  > div:hover {background-color: #3DAFE4;}
  .x6-widget-transform-active-handle {background-color: #3DAFE4;}
}
.x6-widget-transform-resize {border-radius: 0;}

抉择

抉择性能提供了快捷的形式批量挪动、删除节点，是应用频次十分高的性能。

const graph = new Graph({
  selecting: {
    enabled: true,
    rubberband: true,
    showNodeSelectionBox: true
  }
})

对齐线

对齐线是用来帮忙咱们实现节点对齐的重要辅助伎俩：

const graph = new Graph({snapline: true,})

同样也能够通过批改 css 来自定义对齐线款式：

.x6-widget-snapline-vertical {border-right-color: #239EDD;}
.x6-widget-snapline-horizontal {border-bottom-color: #239EDD;}

撤销重做

X6 会实时记录节点增加、删除、属性批改的变动，通过撤销操作能够返回到历史记录中的任意地位。

const graph = new Graph({history: true,})

graph.addNode(...)
graph.history.undo() // 删除新增节点
graph.history.redo()  // 复原新增节点

有时候咱们心愿多个操作能一次性撤销，X6 提供了批量更新的办法 batchUpdate，一次批量操作只会被记录一次。

graph.batchUpdate('rename', () => {rect.prop('zIndex', 10)
  rect.attr('label/text', 'hello')
  rect.attr('label/fill', '#ff0000')  
})

小地图

在有限画布场景，须要关注以后视口处于画布的什么地位并能疾速定位到远处的画布元素，这时就须要小地图功能。小地图其实是画布的一个缩略图，能够通过小地图疾速平移和缩放画布。

const graph = new Graph({
  minimap: {
    enabled: true,
    container: document.getElementById('minimap')!,
    width: 198,
    height: 198,
    padding: 10,
  },
})

最初

工欲善其事必先利其器，抉择一个好的框架能极大水平上进步开发效率，X6 通过几个简略的配置提供了丰盛的开箱即用的性能，对于老手来说是十分敌对的。

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