入门教程

阅读时间约 4 分钟

安装

通过npm引入

npm install @ss/mtdv-graph-flow --registry=http://r.npm.sankuai.com

在代码中引入

import Flow from '@ss/mtdv-graph-flow';

快速上手

数据准备

定义一个用于存储数据的对象，里面包括了点集和边集

其中点集中的每个节点需要包括 id 属性，作为节点存在的唯一标识

边集中的每条边则需要包括 source 和 target 属性，作为边的起点和终点，以节点的的 id 属性作为索引

除了必备的属性之外，我们还看到节点的 inputs 属性和 outputs属性以及边的 sourceAnchorIndex 和 targetAnchorIndex 属性，这些共同规定了联排图中点和点的连边关系，我们将在下一节中的 port 概念中详细解释阅读更多相关内容>

const graphData = {
    nodes: [
        {
            id: 'node1',// 必填,节点的唯一标识
            x: 300,// 非必填,节点的x坐标 
            y: 200,// 非必填,节点的y坐标 
            inputs: [[0.5, 0]],// 非必填,节点的输入port端口
            outputs: [[0.5, 1]],// 非必填,节点的输出port端口
        }
    ],
    edges: [
        {
            source: 'node1',// 必填,边的起始节点id
            target: 'node2',// 必填,边的目标节点id
            sourceAnchorIndex: 0,// 非必填,边的起始节点port端口
            targetAnchorIndex: 0,// 非必填,边的目标节点port端口
        },
    ]
}

创建容器

在 vue 组件中创建一个容器元素用作当前可视化的画布，可以在这里规定容器的宽高，也可以在 Flow 实例中设置

<template>
    <div class="graph-container" ref="graph"></div>
</template>

初始化

在 vue 组件中实例化 Flow ，获取容器元素，设置 Flow 实例的各种样式属性，并将上面定义好的数据对象传入进行可视化渲染，除此之外还会定义时间处理和数据格式化处理等函数，在这里不做展示

export default {
    name: 'Dagre',
    mounted () {
        new Flow(
            { container: this.$refs.graph, },
            graphData
        );
    },
};

可视化效果

经过上面的配置，我们可以得到以下的可视化效果

完整代码

在 vue 组件中使用的完整代码如下,关于其他不同的编排图可视化效果，还可以查看我们的其他 demo 展示查看更多>

<template>
    <div style="height: 100%; width: 100%" ref="graph"></div>
</template>

<script>
import Flow from '@ss/mtdv-graph-flow';

const graphData = {
    nodes: [
        {
            id: 'node1',
            title: '节点1',
            x: 300,
            y: 200,
        },
        {
            id: 'node2',
            title: '节点2',
            x: 200,
            y: 300,
        },
        {
            id: 'node3',
            title: '节点3',
            x: 400,
            y: 300,
        },
        {
            id: 'node4',
            title: '节点4',
            x: 300,
            y: 400,
        },
    ],
    edges: [
        {
            source: 'node1',
            target: 'node2',
        },
        {
            source: 'node1',
            target: 'node3',
        },
        {
            source: 'node2',
            target: 'node4',
        },
        {
            source: 'node3',
            target: 'node4',
        },
    ],
};

export default {
    name: 'begin',
    mounted () {
        new Flow(
            { container: this.$refs.graph, },
            graphData
        );
    }
};
</script>