当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript vis.Network类代码示例

本文整理汇总了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 = {
开发者ID:ElliotWhiley,项目名称:VisualGit,代码行数:67,代码来源:graphSetup.ts

示例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
                })
            );
        }));
开发者ID:young891221,项目名称:pinpoint,代码行数:25,代码来源:server-map-diagram-with-visjs.class.ts

示例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
                })
            );
        }));
    }
开发者ID:young891221,项目名称:pinpoint,代码行数:57,代码来源:server-map-diagram-with-visjs.class.ts

示例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);
    }
开发者ID:young891221,项目名称:pinpoint,代码行数:16,代码来源:server-map-diagram-with-visjs.class.ts

示例5: clear

 clear(): void {
     this.diagram.destroy();
 }
开发者ID:young891221,项目名称:pinpoint,代码行数:3,代码来源:server-map-diagram-with-visjs.class.ts

示例6: setNodeClicked

 private setNodeClicked(key: string): void {
     this.diagram.selectNodes([key]);
     this.outClickNode.emit(this.getNodeData(key));
 }
开发者ID:young891221,项目名称:pinpoint,代码行数:4,代码来源:server-map-diagram-with-visjs.class.ts

示例7: isNodeInDiagram

 private isNodeInDiagram(key: string): boolean {
     return this.diagram.findNode(key).length !== 0;
 }
开发者ID:young891221,项目名称:pinpoint,代码行数:3,代码来源:server-map-diagram-with-visjs.class.ts


注:本文中的vis.Network类示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。