Network

Options

var options = {
  autoResize: true,
  height: '100%',
  width: '100%'
  locale: 'en',
  locales: locales,
  clickToUse: false,
  configure: {...},    // defined in the configure module.
  edges: {...},        // defined in the edges module.
  nodes: {...},        // defined in the nodes module.
  groups: {...},       // defined in the groups module.
  layout: {...},       // defined in the layout module.
  interaction: {...},  // defined in the interaction module.
  manipulation: {...}, // defined in the manipulation module.
  physics: {...},      // defined in the physics module.
}

network.setOptions(options);

개별 옵션은 아래에 설명되어 있습니다. 모듈을 참조하는 것은 해당 모듈에 설명되어 있습니다.

사용자 지정 로케일

로케일 object의 형식은 다음과 같다:

var locales = {
  en: {
    edit: 'Edit',
    del: 'Delete selected',
    back: 'Back',
    addNode: 'Add Node',
    addEdge: 'Add Edge',
    editNode: 'Edit Node',
    editEdge: 'Edit Edge',
    addDescription: 'Click in an empty space to place a new node.',
    edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
    editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
    createEdgeError: 'Cannot link edges to a cluster.',
    deleteClusterError: 'Clusters cannot be deleted.',
    editClusterError: 'Clusters cannot be edited.'
  }
}

자신의 로케일을 정의하려면 키('en')를 변경하고 모든 문자열을 변경할 수 있다. 그러면 로케일 옵션에서 새 키를 사용할 수 있다.

메소드

이것은 공개 API의 모든 메소드 목록입니다. 이들은 상기 열거 모듈에 해당하는 카테고리로 분류되어왔다.

function releaseFunction (clusterPosition, containedNodesPositions) {
    var newPositions = {};
    // clusterPosition = {x:clusterX, y:clusterY};
    // containedNodesPositions = {nodeId:{x:nodeX,y:nodeY}, nodeId2....}
    newPositions[nodeId] = {x:newPosX, y:newPosY};
    return newPositions;
}

{
  nodeId1: {x: xValue, y:yValue},
  nodeId2: {x: xValue, y:yValue},
  ...
}

{
  top: Number,
  left: Number,
  right: Number,
  bottom: Number
}

{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds]
}

{
  nodes: [Array of nodeIds],
  edges: [Array of edgeIds]
}

{
  unselectAll: Boolean,
  highlightEdges: Boolean
}

{
  nodes?: (string | number)[],
  minZoomLevel?: number,
  maxZoomLevel?: number,
  animation?: boolean | {
    duration?: number
    easingFunction?: string
  }
}

{
  scale: Number,
  offset: {x:Number, y:Number}
  locked: boolean
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
}

{
  position: {x:Number, y:Number},
  scale: Number,
  offset: {x:Number, y:Number}
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
}

클러스터 메소드 옵션 Object

클러스터 기능에 제공된 옵션 개체는 다음과 같은 속성을 포함 할 수 있습니다:

var nodes = [
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'},
  {id: 6, label: 'Node 6', cid:1},
  {id: 7, label: 'Node 7', cid:1}
]

var options = {
  joinCondition:function(nodeOptions) {
    return nodeOptions.cid === 1;
  }
}

network.clustering.cluster(options);

var options = {
  processProperties: function (clusterOptions,
      childNodes, childEdges) {
    var totalMass = 0;
    var totalValue = 0;
    for (var i = 0; i < childNodes.length; i++) {
      totalMass += childNodes[i].mass;
      totalValue = childNodes[i].value
        ? totalValue + childNodes[i].value
        : totalValue;
    }
    clusterOptions.mass = totalMass;
    if (totalValue > 0) {
      clusterOptions.value = totalValue;
    }
    return clusterOptions;
  },
}

    clusterNodeProperties: {
        allowSingleNodeCluster: true
    }

동작

공개 API의 모든 동작 목록입니다. 모든 개별 모듈에서 수집됩니다.

이러한 동작은 상호 작용 모듈에 의해 시작됩니다. 그것들은 사용자 입력과 관련이 있습니다.

{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds],
  event: [Object] original click event,
  pointer: {
    DOM: {x:pointer_x, y:pointer_y},
    canvas: {x:canvas_x, y:canvas_y}
  }
}

{
...
  items: [Array of click items],
}

  {nodeId:NodeId}            // node with given id clicked on
  {nodeId:NodeId labelId:0}  // label of node with given id clicked on
  {edgeId:EdgeId}            // edge with given id clicked on
  {edge:EdgeId, labelId:0}   // label of edge with given id clicked on

{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds],
  event: [Object] original click event,
  pointer: {
    DOM: {x:pointer_x, y:pointer_y},
    canvas: {x:canvas_x, y:canvas_y}
    }
  },
  previousSelection: {
    nodes: [Array of previously selected nodeIds],
    edges: [Array of previously selected edgeIds]
  }
}

{
    nodes: [Array of selected nodeIds],
    edges: [Array of selected edgeIds],
    event: [Object] original click event,
    pointer: {
        DOM: {x:pointer_x, y:pointer_y},
        canvas: {x:canvas_x, y:canvas_y}
    },    
    controlEdge: {from:from_node_id, to:to_node_id}
}

{
  direction: '+'/'-',
  scale: Number,
  pointer: {x:pointer_x, y:pointer_y}
}

{
  iterations: Number // iterations so far,
  total: Number      // total iterations in options
}

{
  iterations: Number // iterations it took
}

{
  width: Number     // the new width  of the canvas
  height: Number    // the new height of the canvas
  oldWidth: Number  // the old width  of the canvas
  oldHeight: Number // the old height of the canvas
}

데이터 가져오기

네트워크에는 Gephi에서 데이터를 가져오고 DOT language언어로 그래프를 가져오는 변환 유틸리티가 포함되어 있습니다.

Gephi에서 데이터 가져오기

네트워크는 Gephi에서 내보낸 json 파일에서 직접 데이터를 가져올 수 있습니다. https://gephi.org/plugins/#/plugin/jsonexporter-plugin에서 JSON 내보내기를 얻을 수 있습니다. JSON 파일을 Vis로 가져오는 방법을 보여주는 예시가 있습니다

사용 예시:

// load the JSON file containing the Gephi network.
var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in importing_from_gephi.

// you can customize the result like with these options. These are explained below.
// These are the default options.
var parserOptions = {
  edges: {
    inheritColor: false
  },
  nodes: {
    fixed: true,
    parseColor: false
  }
}

// parse the gephi file to receive an object
// containing nodes and edges in vis format.
var parsed = vis.parseGephiNetwork(gephiJSON, parserOptions);

// provide data in the normal fashion
var data = {
  nodes: parsed.nodes,
  edged: parsed.edges
};

// create a network
var network = new vis.Network(container, data);

Gephi parser 옵션

DOT언어로 데이터 가져오기

네트워크는 DOT language로 데이터 지원합니다. DOT 언어로 데이터를 사용하기 위해 vis.convertDOTNetwork 변환기를 사용하여 DOT 언어를 vis.Network 호환 노드, 모서리 및 옵션 객체로 변환 할 수 있습니다. 원하는 경우 옵션 개체를 다른 옵션으로 확장 할 수 있습니다

사용 예시:

// provide data in the DOT language
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.convertDOTNetwork(DOTstring);

var data = {
  nodes: parsedData.nodes,
  edges: parsedData.edges
}

var options = parsedData.options;

// you can extend the options like a normal JSON variable:
options.nodes = {
  color: 'red'
}

// create a network
var network = new vis.Network(container, data, options);