fybdp-d3-kg/dist/src/Graphs/Graph.d.ts

Knowledge Graph using React and D3.js

/// <reference types="node" />
import * as d3 from 'd3';
import EventEmitter from 'events';
import { EdgeContext, NodeContext } from './elements';
import { d3Types } from './types';
import { Options } from './options';
import './styles/index.scss';
import { Layout } from './Layout';
import { Dragger, PopupMenu, ZoomSlider } from './behavior';
export interface IGraph {
    init(selector: any, options: any): this;
    appendGraph(wrapper: any): void;
    update(data: any): void;
    reset(): void;
    render(): void;
    bindEvents(): void;
    calculatePositions(): void;
}
export declare class Graph extends EventEmitter implements IGraph {
    container: any;
    graphWrapper: d3.Selection<any>;
    info: d3.Selection<any>;
    edgeContext: EdgeContext;
    nodeContext: NodeContext;
    options: Options;
    layout: Layout;
    dragger: Dragger;
    popupMenu: PopupMenu;
    zoomSlider: ZoomSlider;
    graphSvgId: string;
    graphAreaId: string;
    graphGroup: d3.Selection<any>;
    graphSvg: d3.Selection<any>;
    svgLinks: d3.Selection<any>;
    svgNodes: d3.Selection<any>;
    svgLabels: d3.Selection<any>;
    svgCardinality: d3.Selection<any>;
    svgDefs: d3.Selection<any>;
    simulation: any;
    nodesMapIndex: any[];
    justLoaded: boolean;
    editMode: boolean;
    _renders: number;
    uuid: any;
    selectionModules: any[];
    static instances: {};
    /**
     * Note that the `opts.network` attribute is required.
     *
     * @param {string|selection} container 需传入 dom 容器或者容器id {domObject || string} [必选]
     * @param {Object} opts={}
     * @param {Number} [opts.links] - Graph links
     * @param {Number} [opts.nodes] - Graph nodes
     * @param {Number} [opts.margin=40] - Graph margins in pixels.
     * @param {Number} [opts.height=550] - Height of network graph in pixels.
     * @param {Number} [opts.width=800] - Width of network graph in pixels.
     * @param {layout} opts.layout='1' - 1:force,2:tree,3:Dendrogram,4:IndentedTree,5:MindTree
     * @param {String} [opts.engine = 'd3'] - Force layout engine
     * @param {String} [opts.flow] - Display links in horizontal flow?
     * @param {Boolean} [opts.draggable] - Make nodes draggable?
     */
    constructor(container: string, opts?: {}, graphData?: d3Types.d3Graph);
    /**
     * Initializes `Graph` layout, binds graph to {@link layout}, and performs first render.
     *
     * @listens Layout#event:update
 
     * @listens NodeContext#event:update
     * @listens NodeContext#event:enter
     * @listens NodeContext#event:exit
     * @listens NodeContext#event:click
     * @listens NodeContext#event:dblclick
     * @listens NodeContext#event:mouseover
     * @listens NodeContext#event:mouseout
     * @listens EdgeContext#event:update
     * @listens EdgeContext#event:enter
     * @listens EdgeContext#event:exit
     * @listens EdgeContext#event:click
     * @listens EdgeContext#event:dblclick
     * @listens EdgeContext#event:mouseover
     * @listens EdgeContext#event:mouseout
     * @returns {this}
     */
    init(selector: any, options: any): this;
    /**
     * 更新数据
     * @param data
     */
    update(data: any): void;
    reset(): void;
    appendGraph(wrapper: any): void;
    appendInfoPanel(wrapper: any): any;
    private initModules;
    executeModules(clickedNode: any): void;
    /**
     * bind `Graph` add listens.
     *
     * @listens Graph#node:mouseover
     * @listens Graph#node:mouseout
     * @listens Graph#node:click
     * @listens Graph#node:dblclick
     * @listens Graph#link:mouseover
     * @listens Graph#link:mouseout
     * @listens Graph#link:click
     * @listens Graph#link:dblclick
     * @returns {this}
     */
    bindEvents: () => void;
    /**
     * Initialize d3.js Engine
     *
     * @private
     */
    private initSimulation;
    private calculateLinkDistance;
    private getVisibleLinkDistance;
    /** --------------------------------------------------------- **/
    /** -- force-layout related functions                      -- **/
    /** --------------------------------------------------------- **/
    private storeLinksOnNodes;
    private setPositionOfOldLabelsOnNewLabels;
    calculatePositions(): void;
    /**
     * Renders {@link NodeDirector}, {@link EdgeContext} and {@link Labels} for a `Graph`.
     * If nodes have failures, they will be highlighted with colors and animations in the graph.
     *
     * @param {Object} [data] - Defaults to graph's {@link Network} data.
     */
    render(data?: any): this | undefined;
    nodesIndex: () => never[];
    /**
     * Highlights dependencies, of nodes
     *
     * @param {Node} node - Node, whose dependencies are to be highlighted
     * @param {Object} [options={}]
     * @param {Boolean} [options.arrows=null] - Show directional arrows of source-target relationship?
     */
    highlightDependencies(node: any, options?: {
        arrows: boolean;
    }): void;
    updateStyle(): void;
    /**
     * Resets styles, highlights, removing colors, arrows, etc.
     */
    resetStyles(): void;
    _addArrows(container: any, stylesArray: any): any;
    /**
   * 注册插件并且bind到this 推荐使用,  注入graph实例对象,挂在原型链上
   * const MyPlugin = {
   *   install(Graph, options) {
      Graph.prototype.myattr = 'Example plugin Property';
      Graph.prototype.myfn = function() {
        console.log(this);
        return this.myattr
      }
    }
  };
   Graph.use(MyPlugin);
   * @param plugin 插件纯函数
   */
    static use: (plugin: any) => any;
}