本文整理汇总了TypeScript中vis.Network.on方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Network.on方法的具体用法？TypeScript Network.on怎么用？TypeScript Network.on使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类vis.Network的用法示例。
在下文中一共展示了Network.on方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: setEvent
private setEvent(): void {
this.diagram.on('afterDrawing', () => {
if (!this.serverMapData) {
return;
}
this.outRenderCompleted.emit();
});
this.diagram.on('click', (({nodes, edges}: {nodes: string[], edges: string[]}) => {
const isNodeClicked = nodes.length !== 0;
const isEdgeClicked = !isNodeClicked && edges.length !== 0;
const isBackgroundClicked = !(isNodeClicked || isEdgeClicked);
if (isNodeClicked) {
const nodeId = nodes[0];
const nodeData = this.getNodeData(nodeId);
this.outClickNode.emit(nodeData);
} else if (isEdgeClicked) {
const edgeId = edges[0];
const linkData = this.getLinkData(edgeId);
this.outClickLink.emit(linkData);
} else if (isBackgroundClicked) {
this.outClickBackground.emit();
}
}));
this.diagram.on('hoverNode', () => this.changeCursor('pointer'));
this.diagram.on('hoverEdge', () => this.changeCursor('pointer'));
this.diagram.on('blurNode', () => this.changeCursor('default'));
this.diagram.on('blurEdge', () => this.changeCursor('default'));
this.diagram.on('oncontext', (({event, pointer}: {event: MouseEvent, pointer: {[key: string]: any}}) => {
event.preventDefault();
const { x, y } = pointer.DOM;
const nodeId = this.diagram.getNodeAt({x, y}) as string;
const edgeId = this.diagram.getEdgeAt({x, y}) as string;
if (nodeId || NodeGroup.isGroupKey(edgeId)) {
return;
}
edgeId ? (
this.outContextClickLink.emit({
key: edgeId,
coord: {
coordX: x,
coordY: y
}
})
) : (
this.outContextClickBackground.emit({
coordX: x,
coordY: y
})
);
}));
}示例2: drawGraph
function drawGraph() {
bsNodes = new vis.DataSet([]);
bsEdges = new vis.DataSet([]);
abNodes = new vis.DataSet([]);
abEdges = new vis.DataSet([]);
nodes = new vis.DataSet([]);
edges = new vis.DataSet([]);
// create a network
let container = document.getElementById("my-network");
container.innerHTML = '';
let bsData = {
nodes: bsNodes,
edges: bsEdges
}
let abData = {
nodes: abNodes,
edges: abEdges
}
let data = {
nodes: nodes,
edges: edges
};
options = {
configure: {
enabled: false,
},
edges: {
arrows: {
to: {
enabled: true,
scaleFactor: 0.6
},
middle: false,
from: false,
},
color: "#39c0ba",
hoverWidth: 0,
physics: false,
selectionWidth: 0,
shadow: true,
smooth: {
enabled: true,
type: "cubicBezier",
// forceDirection: "horizontal",
roundness: 0.5
},
width: 3,
},
groups: {},
interaction: {
dragNodes: true,
dragView: true,
hideEdgesOnDrag: false,
hideNodesOnDrag: false,
hover: true,
hoverConnectedEdges: false,
keyboard: {
enabled: false,
speed: {x: 10, y: 10, zoom: 0.02},
bindToWindow: true
},
multiselect: false,
navigationButtons: false,
selectable: true,
selectConnectedEdges: false,
tooltipDelay: 300,
zoomView: true,
},
layout: {
randomSeed: 1,
improvedLayout: true,
},
manipulation: {
enabled: false,
initiallyActive: false,
addNode: true,
addEdge: true,
editEdge: true,
deleteNode: true,
deleteEdge: true,
controlNodeStyle: {
shape: "dot",
size: 6,
color: {
background: "#39c0ba",
//.........这里部分代码省略.........