本文整理匯總了TypeScript中vis.Network類的典型用法代碼示例。如果您正苦於以下問題：TypeScript Network類的具體用法？TypeScript Network怎麽用？TypeScript Network使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了Network類的7個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: drawGraph
//.........這裏部分代碼省略.........
highlight: {
background: "#07f968",
border: "#3c3c3c"
}
},
borderWidth: 2,
borderWidthSelected: 2,
}
},
nodes: {
borderWidth: 8,
borderWidthSelected: 8,
color: {
border: "#39c0ba",
background: "#FFF",
highlight: {
border: "#FF0",
background: "#FFF"
},
hover: {
border: "#F00",
background: "#FFF"
},
},
shadow: true,
},
physics: {
enabled: false,
},
};
network = new vis.Network(container, bsData, options);
getAllCommits(function(commits) {
processGraph(commits);
});
network.on("stabilizationIterationsDone", function () {
network.setOptions( { physics: false } );
});
network.on("doubleClick", function(callback) {
if (callback.nodes[0] === undefined) {
return;
} else {
let nodeId: number = callback.nodes[0];
}
let moveOptions = {
offset: {x: 0, y: 0},
scale: 1,
animation: {
duration: 1000,
easingFunction: "easeInOutQuad",
}
};
network.focus(callback.nodes[0], moveOptions);
}, false);
let flag = "basic";
network.on("zoom", function(callback) {
let moveOptions = {示例2:
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
})
);
}));示例3: 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
})
);
}));
}示例4: selectNodeBySearch
selectNodeBySearch(selectedAppKey: string): void {
let selectedNodeId = selectedAppKey;
const isMergedNode = !this.isNodeInDiagram(selectedAppKey);
if (isMergedNode) {
const groupKey = selectedAppKey.split('^')[1];
const selectedMergedNode = this.serverMapData.getNodeList().find(({key}: {key: string}) => {
return NodeGroup.isGroupKey(key) && key.includes(groupKey);
});
selectedNodeId = selectedMergedNode.key;
}
this.diagram.focus(selectedNodeId);
this.setNodeClicked(selectedNodeId);
}示例5: clear
clear(): void {
this.diagram.destroy();
}示例6: setNodeClicked
private setNodeClicked(key: string): void {
this.diagram.selectNodes([key]);
this.outClickNode.emit(this.getNodeData(key));
}示例7: isNodeInDiagram
private isNodeInDiagram(key: string): boolean {
return this.diagram.findNode(key).length !== 0;
}