一、画布

### 属性设置

import { Graph } from '@antv/x6';// JSON / JS 图像数据
const data = {// 节点nodes: [{id: 'node1', // String，可选，节点的唯一标识x: 40,       // Number，必选，节点位置的 x 值y: 40,       // Number，必选，节点位置的 y 值width: 80,   // Number，可选，节点大小的 width 值height: 40,  // Number，可选，节点大小的 height 值label: 'hello', // String，节点标签},{id: 'node2', // String，节点的唯一标识x: 160,      // Number，必选，节点位置的 x 值y: 180,      // Number，必选，节点位置的 y 值width: 80,   // Number，可选，节点大小的 width 值height: 40,  // Number，可选，节点大小的 height 值label: 'world', // String，节点标签},],// 边edges: [{source: 'node1', // String，必须，起始节点 idtarget: 'node2', // String，必须，目标节点 id},],
};// 设置画布
const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#fffbe6', // 设置画布背景颜色 .//或image设置图片啥的},grid: {size: 10,      // 网格大小 10pxvisible: true, // 渲染网格背景},
});// 通过数据渲染画布
graph.fromJSON(data)

### 方法操作

1、平移

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

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

const graph = new Graph({panning: {enabled: true,eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']},
})

禁用平移

graph.isPannable() // 画布是否可以平移
graph.enablePanning() // 启用画布平移
graph.disablePanning() // 禁止画布平移
graph.togglePanning() // 切换画布平移状态

2、缩放

graph.zoom() // 获取缩放级别
graph.zoom(0.2) // 在原来缩放级别上增加 0.2
graph.zoom(-0.2) // 在原来缩放级别上减少 0.2

3、居中

graph.centerContent()

4、导出

a、svg

b、png

import { DataUri } from '@antv/x6'this.graph.toPNG((dataUri: string) => {// 下载DataUri.downloadDataUri(dataUri, 'chart.png')
}, {width?: numberheight?: numberbackgroundColor?: stringpadding: {top: 20,right: 30,bottom: 40,left: 50,},quality?: number        // 图片质量，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92
})

c、JSON

5、销毁

graph.dispose()

二、基类以及节点

### 基类设置

/*
Cell 类提供了一个静态方法 Cell.config(options) 来配置选项的默认值，选项默认值对自定义节点/边非常友好，可以为我们的自定义节点/边指定预设的默认值。例如，我们在定义矩形节点时，为其指定了默认 Markup、默认大小和默认样式。*/
/*
Shape.Rect.config({width: 80,height: 40,markup: [{tagName: 'rect',selector: 'body',}, {tagName: 'text',selector: 'label',},],attrs: {body: {fill: '#fff',stroke: '#000',strokeWidth: 2,},label: {fontSize: 14,fill: '#333',fontFamily: 'Arial, helvetica, sans-serif',textAnchor: 'middle',textVerticalAnchor: 'middle',}},
})
**/import { Shape } from '@antv/x6'const rect = new Shape.Rect({id: 'node1',            // 节点/边的唯一标识，默认使用自动生成的 UUID。x: 40,                  // 特殊化设置y: 40,width: 100,            height: 40,label: 'rect', zIndex: 2,
})const circle = new Shape.Circle({id: 'node2',x: 280,y: 200,width: 60,height: 60,label: 'circle', zIndex: 2,
})const edge = new Shape.Edge({id: 'edge1',source: rect,target: circle,zIndex: 1,
})graph.addNode(rect)
graph.addNode(circle)
graph.addEdge(edge)

### 自定义节点注册

// 第一步
import { Node } from '@antv/x6'class Rect extends Node { // 省略实现细节
}
// 第二步
Rect.config({width: 100,height: 40,markup: [{tagName: 'rect',selector: 'body',},{tagName: 'text',selector: 'label',},],attrs: {body: {fill: '#ffffff',stroke: '#333333',strokeWidth: 2,},label: {fontSize: 14,fill: '#333333',refX: '50%',refY: '50%',textAnchor: 'middle',textVerticalAnchor: 'middle',},},// 通过钩子将自定义选项 label 应用到 'attrs/text/text' 属性上propHooks(metadata) {const { label, ...others } = metadataif (label) {ObjectExt.setByPath(others, 'attrs/text/text', label)}return others},
})
// 第三部步
Graph.registerNode('rect', Rect)
// 第四步

### 节点添加

a、先创建再添加

const rect = new Shape.Rect()rect// 设置节点位置.position(100, 200)// 设置节点大小.resize(80, 40)// 旋转节点.rotate(30)// 设置节点样式.attr({body: {fill: 'blue',},label: {text: 'Hello',fill: 'white',},})// 添加到画布
graph.addNode(rect)

b、添加时顺便设置属性

const rect = graph.addNode({shape: 'rect', // 指定使用何种图形，默认值为 'rect'x: 100,y: 200,width: 80,height: 40,angle: 30,attrs: {body: {fill: 'blue',},label: {text: 'Hello',fill: 'white',},},
})

三、边edge

边属性：

graph.addEdge({source: rect1, // 源节点target: rect2, // 目标节点
})graph.addEdge({source: 'rect1', // 源节点 IDtarget: 'rect2', // 目标节点 ID
})graph.addEdge({source: { cell: rect1, port: 'out-port-1' },  // 源节点和链接桩 IDtarget: { cell: 'rect2', port: 'in-port-1' }, // 目标节点 ID 和链接桩 ID
})graph.addEdge({source: 'rect1',            // 源节点 IDtarget: { x: 100, y: 120 }, // 目标点// hape.Edge 边定义了 'line'（代表 <path> 元素）和 'wrap'（代表透明的 <path> 元素，用于响应交互）两个选择器attrs: {line: {stroke: "#7c68fc", // 指定 path 元素的填充色fill:"",targetName:'',},},
})///需要注意的是，当源/目标是画布上的点时，需要开启 allowBlank 选项（默认已经开启）才能生效。
const graph = new Graph({connecting: {allowBlank: true,},
})
// 路径点。边从起始点开始，按顺序经过路径点，最后到达终止点。
graph.addEdge({source: rect1,target: rect2,vertices: [{ x: 100, y: 200 }, { x: 300, y: 120 },],
})

边标签：

const edge = graph.addEdge({source: rect1,target: rect2,labels: [{attrs: { label: { text: 'edge' } },},],
})
// 或
const edge = graph.addEdge({source: rect1,target: rect2,labels: ['edge'], // 通过 labels 可以设置多个标签，当只设置标签文本是可以简化为此写法
})
// 或
const edge = graph.addEdge({source: rect1,target: rect2,label: 'edge', // 通过 label 设置单个标签，当只设置标签文本是可以简化为此写法
})

四、群组和连接桩

### 基础嵌套

const child = graph.addNode({x: 120,y: 80,width: 120,height: 60,zIndex: 10,label: 'Child\n(embedded)',attrs: {body: {fill: 'green',},label: {fill: '#fff',},},
})const parent = graph.addNode({x: 80,y: 40,width: 320,height: 240,zIndex: 1,label: 'Parent\n(try to move me)',
})parent.addChild(child)

### 拖动嵌套

new Graph({// 拖动嵌套embedding: {enabled: true,findParent({ node }) {const bbox = node.getBBox()return this.getNodes().filter((node) => {// 只有 data.parent 为 true 的节点才是父节点const data = node.getData<any>()if (data && data.parent) {const targetBBox = node.getBBox()return bbox.isIntersectWithRect(targetBBox)}return false})}}，// 限制位置translating: {restrict(view) {const cell = view.cellif (cell.isNode()) {const parent = cell.getParent()if (parent) {return parent.getBBox()}}return null},},
})//自动拓展父节点

五、撤销、重做

const graph = new Graph({history: true,
})// 等同于
const graph = new Graph({history: {enabled: true,revertOptionsList: [ 'option1' ],// 传递给撤销动作的选项名数组。applyOptionsList: [ 'option2' ],   // 传递给重做动作的选项名数组。// 当一个命令被添加到 Undo 队列前被调用，如果该方法返回 false，那么这个命令将不会被添加到 Undo 队列中。beforeAddCommand(event, args) {if (args.options) {return args.options.ignore !== false}},// 当一个命令被添加到 Undo 队列后被调用。afterAddCommand(){},// },
})if (graph.isHistoryEnabled()) {graph.disableHistory()
} else {graph.enableHistory()
}graph.undo();
graph.redo();

六：点选、框选

const graph = new Graph({selecting: true,
})// 等同于
const graph = new Graph({selecting: {enabled: true,},
})
if (graph.isSelectionEnabled()) {graph.disableSelection()
} else {graph.enableSelection()
}

### 方法

// 节点/边被选中时触发。unselected
graph.on('cell:selected', (args: { cell: Celloptions: Model.SetOptions
}) => { // code here
})// 节点被选中时触发。graph.on('node:selected', (args: { cell: Cellnode: Node options: Model.SetOptions
}) => { // code here
})
// 边被选中时触发。
graph.on('edge:selected', (args: { cell: Celledge: Edgeoptions: Model.SetOptions
}) => { // code here
})// 选中的节点/边发生改变(增删)时触发。
graph.on('selection:changed', (args: {added: Cell[]     // 新增被选中的节点/边removed: Cell[]   // 被取消选中的节点/边selected: Cell[]  // 被选中的节点/边options: Model.SetOptions
}) => {// code here
})// 对齐线
const graph = new Graph({snapline: true,
})// 等同于
const graph = new Graph({snapline: {enabled: true,className: 'my-snapline',// 样式tolerance: 10，// 精度},
})

七、拖拽 embled

八、调整大小、旋转功能

const graph = new Graph({resizing: {    // 可以在全局配置 resizing 来启用调整节点大小的功能。enabled: true,    },translating: {restrict: true,    // 如果设置为 true, 节点不能移动超出画布区域},connecting: {snap: {            // 当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附，可以通过配置 radius 属性自定义触发吸附的距离。当 snap 设置为 false 时不会触发自动吸附。默认值为 false。radius: 50,},allowBlank: true,    // 是否允许连接到画布空白位置的点，默认为 trueallowMulti:true,    // 是否允许在相同的起始节点和终止之间创建多条边},})

allowBlank

是否允许连接到画布空白位置的点，默认为 true。支持以下两种形式：

boolean
((this: Graph, args: ValidateConnectionArgs) => boolean)

allowMulti

是否允许在相同的起始节点和终止之间创建多条边，默认为 true。当设置为 false 时，在起始和终止节点之间只允许创建一条边，当设置为 'withPort' 时，在起始和终止节点的相同链接桩之间只允许创建一条边（即，起始和终止节点之间可以创建多条边，但必须要要链接在不同的链接桩上）。支持以下三种形式：

boolean
withPort
((this: Graph, args: ValidateConnectionArgs) => boolean)

allowLoop

是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true。支持以下两种形式：

boolean
((this: Graph, args: ValidateConnectionArgs) => boolean)

allowNode

是否允许边链接到节点（非节点上的链接桩），默认为 true。支持以下两种形式：

boolean
((this: Graph, args: ValidateConnectionArgs) => boolean)

allowEdge

是否允许边链接到另一个边，默认为 true。支持以下两种形式：

boolean
((this: Graph, args: ValidateConnectionArgs) => boolean)

allowPort

是否允许边链接到链接桩，默认为 true。支持以下两种形式：

boolean
((this: Graph, args: ValidateConnectionArgs) => boolean)

highlight

拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 false。

anchor

当连接到节点时，通过 anchor 来指定被连接的节点的锚点，默认值为 center。

sourceAnchor

当连接到节点时，通过 sourceAnchor 来指定源节点的锚点。

targetAnchor

当连接到节点时，通过 targetAnchor 来指定目标节点的锚点。

edgeAnchor

当连接到边时，通过 edgeAnchor 来指定被连接的边的锚点，默认值为 ratio。

sourceEdgeAnchor

当连接到边时，通过 sourceEdgeAnchor 来指定源边的锚点。

targetEdgeAnchor

当连接到边时，通过 targetEdgeAnchor 来指定目标边的锚点。

connectionPoint

指定连接点，默认值为 boundary。

sourceConnectionPoint

连接源的连接点。

targetConnectionPoint

连接目标的连接点。

九、事件

graph.on('cell:added', ({ cell, index, options }) => { })
graph.on('cell:removed', ({ cell, index, options }) => { })
graph.on('cell:changed', ({ cell, options }) => { })graph.on('node:added', ({ node, index, options }) => { })
graph.on('node:removed', ({ node, index, options }) => { })
graph.on('node:changed', ({ node, options }) => { })graph.on('edge:added', ({ edge, index, options }) => { })
graph.on('edge:removed', ({ edge, index, options }) => { })
graph.on('edge:changed', ({ edge, options }) => { })

节点或边缩放/平移/旋转

事件名	回调参数	说明
`node:move`	`{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }`	开始移动节点时触发。
`node:moving`	`{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }`	移动节点时触发。
`node:moved`	`{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }`	移动节点后触发。
`edge:move`	`{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }`	开始移动边时触发。
`edge:moving`	`{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }`	移动边时触发。
`edge:moved`	`{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }`	移动边后触发。
`node:resize`	`{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }`	开始调整节点大小时触发。
`node:resizing`	`{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }`	调整节点大小时触发。
`node:resized`	`{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }`	调整节点大小后触发。
`node:rotate`	`{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }`	开始旋转节点时触发。
`node:rotating`	`{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }`	旋转节点时触发。
`node:rotated`	`{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }`	旋转节点后触发。

参数中的 x 和 y 是鼠标相对于画布的坐标。

graph.on('node:moved', ({ e, x, y, node, view }) => { })
graph.on('node:resized', ({ e, x, y, node, view }) => { })
graph.on('node:rotated', ({ e, x, y, node, view }) => { })

节点嵌入

事件名	回调参数	说明
`node:embed`	`{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView, currentParent: Node }`	开启嵌入，在开始拖动节点时触发。
`node:embedding`	`{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView, currentParent: Node, candidateParent: Node }`	寻找目标节点过程中触发。
`node:embedded`	`{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView, previousParent: Node, currentParent: Node }`	完成节点嵌入后触发。

边连接/取消连接

当拖动边的起始/终止箭头将边连接到节点/边或者将边从节点/边上分离后触发 edge:connected，回调函数的参数如下。

interface Args {e: JQuery.MouseUpEvent  // 鼠标事件对象edge: Edge              // 边view: EdgeView          // 边的视图isNew: boolean          // 是否是新创建的边type: Edge.TerminalType // 操作的是起始箭头还是终止箭头（'source' | 'target'）previousCell?: Cell | null             // 交互前连接到的节点/边previousView?: CellView | null         // 交互前连接到的节点/边的视图previousPort?: string | null           // 交互前连接到的链接桩 IDpreviousPoint?: Point.PointLike | null // 交互前连接到的点（将边的终端从空白处拖动到节点/边上时记录起始终端的位置）previousMagnet?: Element | null        // 交互前连接到的元素currentCell?: Cell | null             // 交互后连接到的节点/边currentView?: CellView | null         // 交互后连接到的节点/边的视图currentPort?: string | null           // 交互后连接到的链接桩 IDcurrentPoint?: Point.PointLike | null // 交互后连接到的点（将边的终端从节点/边上拖动到空白处时记录拖动后终端的位置）currentMagnet?: Element | null        // 交互后连接到的元素
}

我们可以通过 isNew 来判断连线完成后，对应的边是否是新创建的边。比如从一个链接桩开始，创建了一条边并连接到另一个节点/链接桩，此时 isNew 就为 true。

graph.on('edge:connected', ({ isNew, edge }) => {if (isNew) {// 对新创建的边进行插入数据库等持久化操作}
})

特别注意的是，参数中的 previous... 是记录操作终端在连接/取消连接之前的状态，所以在创建新的边的时候，它们都是 null。很多人在创建新边后获取 sourceCell 时误用了 previousCell，正确的使用方式是：

graph.on('edge:connected', ({ isNew, edge }) => {if (isNew) {const source = edge.getSourceCell()}
})

节点/边

添加/删除/修改

当节点/边被添加到画布时，触发以下事件：

added
cell:added
node:added（仅当 cell 是节点时才触发）
edge:added（仅当 cell 是边时才触发）

当节点/边被移除时，触发以下事件：

removed
cell:removed
node:removed（仅当 cell 是节点时才触发）
edge:removed（仅当 cell 是边时才触发）

当节点/边发生任何改变时，触发以下事件：

changed
cell:changed
node:changed（仅当 cell 是节点时才触发）
edge:changed（仅当 cell 是边时才触发）

可以在节点/边上监听：

cell.on('added', ({ cell, index, options }) => { })
cell.on('removed', ({ cell, index, options }) => { })
cell.on('changed', ({ cell, options }) => { })

或者在 Graph 上监听：

graph.on('cell:added', ({ cell, index, options }) => { })
graph.on('cell:removed', ({ cell, index, options }) => { })
graph.on('cell:changed', ({ cell, options }) => { })graph.on('node:added', ({ node, index, options }) => { })
graph.on('node:removed', ({ node, index, options }) => { })
graph.on('node:changed', ({ node, options }) => { })graph.on('edge:added', ({ edge, index, options }) => { })
graph.on('edge:removed', ({ edge, index, options }) => { })
graph.on('edge:changed', ({ edge, options }) => { })

change:xxx

当调用 setXxx(val, options) 和 removeXxx(options) 方法去改变节点/边的数据时，并且 options.silent 不为 true 时，都将触发对应的 chang 事件，并触发节点/边重绘。例如：

cell.setZIndex(2)
cell.setZIndex(2, { silent: false })
cell.setZIndex(2, { anyKey: 'anyValue' })

将触发 Cell 上的以下事件：

change:*
change:zIndex

和 Graph 上的以下事件：

cell:change:*
node:change:*（仅当 cell 是节点时才触发）
edge:change:*（仅当 cell 是边时才触发）
cell:change:zIndex
node:change:zIndex（仅当 cell 是节点时才触发）
edge:change:zIndex（仅当 cell 是边时才触发）

可以在节点/边上监听：

// 当 cell 发生任何改变时都将被触发，可以通过 key 来确定改变项
cell.on('change:*', (args: {cell: Cell    key: string   // 通过 key 来确定改变项current: any  // 当前值previous: any // 改变之前的值options: any  // 透传的 options
}) => { if (key === 'zIndex') {// }
})cell.on('change:zIndex', (args: {cell: Cellcurrent?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })

或者在 Graph 上监听：

graph.on('cell:change:*', (args: {cell: Cell    key: string   // 通过 key 来确定改变项current: any  // 当前值，类型根据 key 指代的类型确定previous: any // 改变之前的值，类型根据 key 指代的类型确定options: any  // 透传的 options
}) => { })// 当 cell 为节点时触发
graph.on('node:change:*', (args: {cell: Cell    node: Nodekey: string   // 通过 key 来确定改变项current: any  // 当前值，类型根据 key 指代的类型确定previous: any // 改变之前的值，类型根据 key 指代的类型确定options: any  // 透传的 options
}) => { })// 当 cell 为边时触发
graph.on('edge:change:*', (args: {cell: Cell    edge: Edgekey: string   // 通过 key 来确定改变项current: any  // 当前值，类型根据 key 指代的类型确定previous: any // 改变之前的值，类型根据 key 指代的类型确定options: any  // 透传的 options
}) => { })graph.on('cell:change:zIndex', (args: {cell: Cellcurrent?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })// 当 cell 为节点时触发
graph.on('node:change:zIndex', (args: {cell: Cellnode: Nodecurrent?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })// 当 cell 为边时触发
graph.on('edge:change:zIndex', (args: {cell: Celledge: Edge        current?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })

十、VUE使用

渲染 Vue 节点

我们提供了一个独立的包 @antv/x6-vue-shape 来使用 Vue(2/3) 渲染节点。

# npm
npm install @antv/x6-vue-shape# yarn
yarn add @antv/x6-vue-shape# 在 vue2 下还需要安装 @vue/composition-api
yarn add @vue/composition-api --dev

安装并应用该包后，指定节点的 shape 为 vue-shape，并通过 component 属性来指定渲染节点的 Vue 组件。

import '@antv/x6-vue-shape'

import Count from 'Count.vue'const graph = new Graph({container: document.getElementById("app"),width: 600,height: 400,grid: true,
});Graph.registerNode("my-count", {inherit: "vue-shape",x: 200,y: 150,width: 150,height: 100,component: {template: `<Count />`,components: {Count,},},
});graph.addNode({id: "1",shape: "my-count",x: 400,y: 150,width: 150,height: 100,data: {num: 0,},
});

在 Vue 组件中，我们可以通过 inject 配置来获取 node 和 graph，在组件内就可以对画布或者节点做操作。

<template><div><el-button @click="add()">内部Add: {{ num }} </el-button></div>
</template><script>
export default {name: "Count",inject: ["getGraph", "getNode"],data() {return {num: 0,};},mounted() {const self = this;const node = this.getNode();// 监听数据改变事件node.on("change:data", ({ current }) => {self.num = current.num;});},methods: {add() {const node = this.getNode();const { num } = node.getData();node.setData({num: num + 1,});},},
};
</script>

详细 demo

需要注意的是，在渲染 vue 组件的过程中用到了运行时编译，所以需要在 vue.config.js 中启用 runtimeCompiler: true 配置。同样当 component 为 Vue 组件或函数时，将不能通过 graph.JSON()和graph.fromJSON() 方法正确导出和导入画布数据，因此我们提供了 Graph.registerVueComponent(...) 来解决这个问题。

方案一

使用 Graph.registerNode(...) 方法将 Vue 组件注册到系统中。

Graph.registerNode("my-count", {inherit: "vue-shape",x: 200,y: 150,width: 150,height: 100,component: {template: `<Count />`,components: {Count,},},
});

然后将节点的 shape 属性指定为注册的节点名称

graph.addNode({shape: "my-count",x: 400,y: 150,width: 150,height: 100,
});

方案二

使用 Graph.registerVueComponent(...) 方法将 Vue 组件注册到系统中。

Graph.registerVueComponent("count",{template: `<Count />`,components: {Count,},},true
);

然后将节点的 component 属性指定为注册的组件名。

graph.addNode({x: 40,y: 40,width: 100,height: 40,shape: 'vue-shape',component: 'count',
})

antv 官方文档参考 ywy（基础）相关推荐

spark之4：基础指南（源自官方文档）
spark之4:基础指南(源自官方文档) @(SPARK)[spark, 大数据] spark之4基础指南源自官方文档一简介二接入Spark 三初始化Spark 一使用Shell 四弹性分布式数据 ...
Sass快速入门笔记（将主要知识点截取出来，参考官方文档和一些网络教学视频）
文章目录一.安装Sass(全部参考Sass官方文档) 1.windows需先安装`RuBy`,`Mac`系统自带`RuBy`无需安装 2.Sass安装二.编译css文件 1.单个文件编译(命令行) ...
【keras】keras教程（参考官方文档）
文章目录一.callbacks篇 1.ReduceLROnPlateau 训练过程优化学习率 2.EarlyStopping 早停操作 3.ModelCheckpoint 用于设置保存的方式 4.T ...
mysql如何降级_降级MySQL（参考MySQL官方文档）
降级MySQL(参考MySQL官方文档) 介绍降级MySQL安装的步骤. 降级比升级更不常见.降级通常是由于生产系统上发生兼容性或性能问题而执行,并且在测试系统的初始升级验证期间没有发现. 与升级过程 ...
Centos 7.6 服务器安装oracle 11gR2（参考官方文档）
Centos 7.6 服务器安装oracle 11gR2 说来气人,项目需要所以得在服务器上安装Oracle. 像往常一样,打开浏览器 -> 搜索 - > 找博客 -> 安装. 但是 ...
最新Elasticsearch8.4.3 + Kibana8.4.3在云服务器Centos7.9安装部署（参考官方文档）
一.前言最近笔者学习Elasticsearch,官方最新稳定版为 Elasticsearch-8.4.3,想在云服务器上Centos7.9搭建.搭建之路坑多路少啊(指网上的博文教程五花八门,基本 ...
非零基础自学Golang 第1章走进Go 1.2 Go语言官方文档 1.3 学好Go 的建议
非零基础自学Golang 文章目录非零基础自学Golang 第1章走进Go 1.2 Go语言官方文档 1.3 学好Go 的建议 1.3.1 了解语言特性及自身需求 1.3.2 动手写代码 1.3. ...
MySQL8.0.28安装教程全程参考MySQL官方文档
MySQL8.0.28详细安装教程.提供了Windows10下安装MariaDB与MySQL8.0同时共存的方法,以及Linux发行版Redhat7系列安装MySQL8.0详细教程.Windows10 ...
阿里云OSS | 对象存储服务快速入门 | 参考官方文档实现使用JavaSDK上传文件 | 本地上传与web上传案例
参考文档 : 点击查看文章目录运行环境一.OSS相关概念 1.1 Storage Class 存储类型 1.2 Bucket 存储空间 1.3 Object 对象 1.4 Region 地域 1 ...

antv 官方文档参考 ywy（基础）

一、画布

### 属性设置

### 方法操作

1、平移

2、缩放

3、居中

4、导出

5、销毁

二、基类以及节点

### 基类设置

### 自定义节点注册

### 节点添加

三、边edge

四、群组和连接桩

### 基础嵌套

### 拖动嵌套

五、撤销、重做

六：点选、框选

### 方法

七、拖拽 embled

八、调整大小、旋转功能

九、事件

节点或边缩放/平移/旋转

节点嵌入

边连接/取消连接

节点/边

添加/删除/修改

change:xxx

十、VUE使用

渲染 Vue 节点

antv 官方文档参考 ywy（基础）相关推荐

最新文章

热门文章

antv 官方文档参考 ywy（基础）

一、画布

### 属性设置

### 方法操作

1、平移

2、缩放

3、居中

4、导出

5、销毁

二、基类 以及 节点

### 基类设置

### 自定义节点注册

### 节点添加

三、边edge

四、群组和连接桩

### 基础嵌套

### 拖动嵌套

五、撤销、重做

六：点选、框选

### 方法

七、拖拽 embled

八、调整大小、旋转功能

九、事件

节点或边缩放/平移/旋转

节点嵌入

边连接/取消连接

节点/边

添加/删除/修改

change:xxx

十、VUE使用

渲染 Vue 节点

antv 官方文档参考 ywy（基础）相关推荐

最新文章

热门文章

二、基类以及节点