Network

네트워크는 Node와 가장자리로 구성된 네트워크와 네트워크를 표시하기 위한 시각화다. 시각화는 사용하기 쉽고 사용자 지정 모양, 스타일, 색상, 크기, 이미지 등을 지원한다. 네트워크 시각화는 현대 브라우저에서 최대 수천 개의 Node와 Edge에 대해 원활하게 작동한다. 더 많은 Node를 처리하기 위해, 네트워크에는 클러스터링 지원이 있다. 네트워크는 렌더링을 위해 HTML 캔버스를 사용한다.

4.0을 기준으로, 네트워크는 네트워크의 특정 부분을 처리하는 개별 모듈로 구성된다. 이들 모듈에는 아래 목록의 모듈을 클릭하면 액세스할 수 있는 고유의 문서, 옵션, 방법 및 동작가 있다.

Show the getting started!

Contents

모듈

configure 필터링으로 대화식 옵션 편집기를 생성합니다.
edges Edge 생성 및 삭제를 처리하고 전역 Edge 옵션 및 스타일을 포함합니다.
groups 존재하지 않는 그룹이 있는 Node를 처리하는 방법에 대한 그룹 및 일부 옵션을 포함합니다.
interaction 네트워크와의 모든 사용자 상호 작용에 사용됩니다. 탐색 버튼 및 팝업뿐만 아니라 마우스 및 터치 동작 및 선택을 처리합니다.
layout 초기 및 계층 적 위치를 제어합니다.
manipulation 네트워크의 데이터를 변경하기위한 API 및 선택적 GUI를 제공합니다.
nodes Node 작성 및 삭제를 처리하고 글로벌 Node 옵션 및 스타일을 포함합니다.
physics 모든 시뮬레이션이 Node와 Edge를 최종 위치로 이동하고 안정화도 제어합니다.

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);

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

이름 Type Default 설명
autoResize Boolean true true 인 경우 네트워크는 컨테이너의 크기가 조정되는시기를 자동으로 감지하여 그에 따라 다시 그립니다. false 인 경우, redraw () 및 setSize () 함수를 사용하여 컨테이너의 크기를 조정 한 후 네트워크를 강제로 다시 페인트 할 수 있습니다.
width String '100%' 캔버스의 너비. 백분율 또는 픽셀일 수 있습니다 (예. '400px').
height String '100%' 캔버스의 높이. 백분율 또는 픽셀일 수 있습니다 (예. '400px').
locale String 'en' locale을 선택하십시오. 기본적으로 언어는 영어입니다.
locales Object defaultLocales 로케일 Object. 기본적으로 'en', 'de', 'es', 'it', 'nl' 'pt-br', 'ru' 이 지원됩니다. 사용자 정의 방법에 대한 자세한 방법은 locales section below 을 참조하세요.
clickToUse Boolean false 네트워크가 clickToUse로 구성된 경우, 활성화 된 경우에만 마우스 및 터치 동작에 반응합니다. 활성화되면 네트워크 주위에 파란색 그림자 테두리가 표시됩니다. 네트워크는 네트워크를 클릭하여 활성 상태로 설정되며 네트워크 외부를 클릭하거나 ESC 키를 누르면 다시 비활성 상태로 변경됩니다
configure Object Object 이 object의 옵션은 configure module에 설명되어 있습니다.
edges Object Object 이 object의 옵션은 edges module에 설명되어 있습니다.
nodes Object Object 이 object의 옵션은 nodes module에 설명되어 있습니다.
groups Object Object 이 object의 옵션은 groups module에 설명되어 있습니다.
layout Object Object 이 object의 옵션은 layout module에 설명되어 있습니다.
interaction Object Object 이 object의 옵션은 interaction module에 설명되어 있습니다.
manipulation Object Object 이 object의 옵션은 manipulation module에 설명되어 있습니다.
physics Object Object 이 object의 옵션은 physics module에 설명되어 있습니다.


사용자 지정 로케일

로케일 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의 모든 메소드 목록입니다. 이들은 상기 열거 모듈에 해당하는 카테고리로 분류되어왔다.

네트워크의 전역적 메소드.
destroy()
setData({nodes: vis DataSet/Array,edges: vis DataSet/Array})
setOptions(Object options)
on(String event name, Function callback)
off(String event name, Function callback)
once(String event name, Function callback)
캔버스와 관련된 기능.
canvasToDOM({x: Number,y: Number})
DOMtoCanvas({x: Number,y: Number})
redraw()
setSize(String width,String height)
클러스터링
cluster( Object options)
clusterByConnection( String nodeId, [Object options] )
clusterByHubsize( [Number hubsize], [Object options])
clusterOutliers( [Object options])
findNode( String/Number nodeId)
getClusteredEdges( String baseEdgeId)
getBaseEdge( String clusteredEdgeId)
getBaseEdges(String clusteredEdgeId)
updateEdge( String startEdgeId, Object options)
updateClusteredNode( String clusteredNodeId, Object options)
isCluster( String nodeId)
getNodesInCluster( String clusterNodeId)
openCluster( String nodeId, Object options)
Layout
getSeed()
GUI없이 조작 시스템을 사용하기위한 조작 방법.
enableEditMode()
disableEditMode()
addNodeMode()
editNode()
addEdgeMode()
editEdgeMode()
deleteSelected()
Node와 Edge의 정보를 얻을 수 있는 방법.
getPositions([Array of nodeIds])
storePositions()
moveNode(nodeId, Number x, Number y)
getBoundingBox(String nodeId)
getConnectedNodes(String nodeId or edgeId, [String direction])
getConnectedEdges(String nodeId)
시뮬레이션 실행시기를 제어하는 물리적 방법.
startSimulation()
stopSimulation()
stabilize([iterations])
Node와 Edge의 선택 방법.
getSelection()
getSelectedNodes()
getSelectedEdges()
getNodeAt({x: xPosition DOM, y: yPosition DOM})
getEdgeAt({x: xPosition DOM, y: yPosition DOM})
selectNodes(Array with nodeIds,[Boolean highlightEdges])
selectEdges(Array with edgeIds)
setSelection( Object selection, [Object options])
unselectAll()
뷰포트의 확대축소 와 역동적표현을 조절하는 방법.
getScale()
getViewPosition()
fit([Object options])
focus( String nodeId, [Object options])
moveTo(Object options)
releaseNode()
구성자 모듈과 함께 사용하는 방법.
getOptionsFromConfigurator()


클러스터 메소드 옵션 Object

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

이름 Type 설명
joinCondition(
  nodeOptions: Object
)
or
joinCondition(
  parentNodeOptions: Object,
  childNodeOptions: Object
)
Function 클러스터 메소드를 제외한 모든 옵션.
clusterByConnection은 2 개의 nodeOptions object를 joinCondition 콜백에 인수로 전달하는 유일한 함수입니다. 클러스터 모듈은 클러스터에있는 것으로 선택된 모든 Node를 반복하고 데이터를 인수로 사용하여이 함수를 호출합니다. 이 함수가 true를 반환하면이 Node가 클러스터에 추가됩니다. 클러스터에 포함할지 여부를 결정하기 위해 Node에 추가 한 모든 사용자 정의 필드뿐만 아니라 모든 옵션 (기본값 포함)에 액세스 할 수 있습니다. 예:
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);
clusterByConnection의 2개의 nodeOptions object를 joinCondition 콜백에 인수로 전달합니다.
processProperties(
  clusterOptions: Object,
  childNodesOptions: Array,
  childEdgesOptions: Array
)
Function Optional. 새 클러스터 Node를 작성하기 전에 이 (선택적)기능은 사용자가 제공 한 특성 (clusterNodeProperties)에 포함된 모든 Node 및 포함 된 모든 Edge와 함께 호출됩니다. 이를 사용하여 클러스터에 포함 된 항목을 기반으로 클러스터의 속성을 업데이트 할 수 있습니다. 이 함수는 속성을 반환하여 클러스터 Node를 생성해야합니다. 아래 예에서는 클러스터를 만들 때 질량과 값을 보존합니다:
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 Object 옵션. 이것은 클러스터 Node에 대한 옵션을 포함하는 object입니다. All options described nodes module에 설명되어 있는 모든 옵션들을 허용합니다. 이를 통해 원하는 방식으로 클러스터 Node를 스타일링 할 수 있습니다. 미세 조정을 위해 processProperties 함수에 제공되는 스타일 object이기도합니다. 정의되지 않은 경우 기본 Node 옵션이 사용됩니다.

기본 기능은 클러스터에 둘 이상의 Node가 포함 된 경우에만 클러스터링을 허용합니다. 단일 Node의 클러스터링을 허용하기 위해 allowSingleNodeCluster : true 특성을 사용할 수 있습니다.
    clusterNodeProperties: {
        allowSingleNodeCluster: true
    }
clusterEdgeProperties Object 옵션. 이것은 클러스터에 연결된 Edge에 대한 옵션을 포함하는 object입니다. edges module에 설명되어 있는 모든 옵션들을 허용합니다. 이를 사용하여 원하는 방식으로 클러스터에 연결하는 모서리의 스타일을 지정할 수 있습니다. 제공되지 않은 경우 교체 된 모서리의 옵션이 사용됩니다. 정의되지 않은 경우 기본 모서리 옵션이 사용됩니다.


동작

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

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

이름 Properties 설명
사용자의 상호 작용, 선택, 드래그 등에 의해 유발되는 동작.
click Object 사용자가 마우스를 클릭하거나 터치 스크린 장치를 탭하면 시작됩니다. 속성이 다음과 같이 구조화 된 object를 전달합니다:
{
  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}
  }
}
이것은 모든 동작에 공통적 인 구조입니다. click 동작의 경우 다음 속성이 추가됩니다:
{
...
  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
items 배열 의 순서는 z 순서로 내림차순입니다. 따라서 최상위 항목을 얻으려면 인덱스 0에서 값을 가져옵니다.
doubleClick same as click. 사용자가 마우스를 두 번 클릭하거나 터치 스크린 장치를 두 번 탭하면 시작됩니다. 더블 클릭은 실제로 두 번의 클릭이므로 두 번의 클릭 동작이 시작되고 그 다음에 더블 클릭 동작이 발생합니다. 더블 클릭 동작이 발생한 경우 클릭 동작을 사용하지 않으려면 클릭 동작 사이의 시간을 확인한 후 처리하십시오.
oncontext same as click. 사용자가 마우스 오른쪽 버튼으로 캔버스를 클릭하면 시작됩니다. 마우스 오른쪽 버튼은 기본적으로 선택되지 않습니다. 원하는 경우에 getNodeAt 메소드를 이용하여 Node를 선택할 수 있다.
hold same as click. 사용자가 마우스를 클릭하거나 잡고 있으면 터치 스크린 장치를 탭하고 누르고 있으면 시작됩니다. 이 경우 클릭 이벤트도 시작됩니다.
release same as click. 캔버스에 그리기가 완료되면 시작됩니다. 네트워크 위에 그리는 데 사용할 수 있습니다.
select same as click. 사용자 액션으로 선택이 변경되면 시작됩니다. 이는 Node 또는 모서리가 선택되었거나 선택에 추가 또는 선택 해제되었음을 의미합니다. 모든 선택 이벤트는 클릭 한 상태에서만 트리거됩니다.
selectNode same as click. 사용자가 Node를 선택하면 시작됩니다.
selectEdge same as click. 사용자가 엣지를 선택하면 시작됩니다.
deselectNode Object 사용자가 Node를 선택 해제했거나 해제했을 때 발생합니다. 이전 선택은 마지막 사용자 이벤트 전에 선택된 Node 및 Edge의 목록입니다. 속성이 다음과 같이 구조화 된 object를 전달합니다:
{
  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]
  }
}
deselectEdge same as deselectNode. 사용자가 엣지 (또는 엣지)를 선택 해제했을 때 발생합니다. 이전 선택은 마지막 사용자 이벤트 전에 선택된 Node 및 Edge의 목록입니다.
dragStart same as click. 드래그를 시작할 때 시작됩니다.
dragging same as click. Node 또는 뷰를 드래그 할 때 발생합니다.
dragEnd same as click. 드래그가 완료되면 시작됩니다.
controlNodeDragging Object 컨트롤 Node를 드래그 할 때 발생합니다. 제어 Edge는 드래그되는 Edge이며 'from'및 'to'Node의 ID를 포함합니다. 제어 Node가 다른 Node 위로 끌지 않으면 'to'필드가 정의되지 않습니다. 속성이 다음과 같이 구조화 된 object를 전달합니다:
{
    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}
}
controlNodeDragEnd same as controlNodeDragging. 컨트롤 Node 드래그가 완료되면 시작됩니다.
hoverNode {node: nodeId} 옵션 interaction:{hover:true} 이 활성화되어 있고 마우스가 노드 위로 움직이면 시작됩니다.
blurNode {node: nodeId} 옵션 interaction:{hover:true} 이 활성화되어 있고 마우스가 노드 위로 움직이면 시작됩니다.
hoverEdge {edge: edgeId} 옵션 interaction:{hover:true} 이 활성화되어 있고 마우스가 에지 위로 움직이면 시작됩니다.
blurEdge {edge: edgeId} 옵션 interaction:{hover:true} 이 활성화되어 있고 마우스가 노드 위로 움직이면 시작됩니다.
zoom Object 사용자가 확대 또는 축소하면 시작됩니다. 속성은 확대 / 축소 방향을 알려줍니다. 배율은 0보다 큰 숫자이며 network.getScale ()을 사용할 때와 동일합니다. 확대 또는 축소 탐색 버튼을 클릭하여 시작하면 전달 된 object의 포인터 속성이 null이됩니다. 속성이 다음과 같이 구조화 된 object를 전달합니다:
{
  direction: '+'/'-',
  scale: Number,
  pointer: {x:pointer_x, y:pointer_y}
}
showPopup id of item corresponding to popup 팝업 (도움말)이 표시되면 시작됩니다.
hidePopup none 팝업 (도움말)이 숨겨지면 시작됩니다.
동작은 물리 시뮬레이션을 트리거했습니다. GUI 업데이트를 트리거하는 데 사용할 수 있습니다.
startStabilizing none 안정화가 시작되면 시작됩니다. 노드를 끌고 물리 시뮬레이션이 다시 시작되어 다시 안정화되는 경우에도 마찬가지입니다. 안정화는 반드시 '보이지 않고'를 암시하지 않습니다.
stabilizationProgress Object updateInterval 반복횟수 배수에 도달하면 시작됩니다. 이것은 '숨겨진'안정화에서만 발생합니다. 속성이 다음과 같이 구조화 된 object를 전달합니다:
{
  iterations: Number // iterations so far,
  total: Number      // total iterations in options
}
stabilizationIterationsDone none '숨겨진'안정화가 완료되면 시작됩니다. 반드시 네트워크가 안정화 된 것은 아닙니다. 또한 옵션에 정의 된 반복 횟수에 도달했음을 의미 할 수도 있습니다.
stabilized Object 네트워크가 안정되거나 stopSimulation()가 호출되었을때 발생합니다. 반복 횟수는 네트워크를 안정화하는 데 필요한 최대 반복 횟수를 조정하는데 사용될 수 있습니다. 속성이 다음과 같이 구조화 된 객체를 전달합니다:
{
  iterations: Number // iterations it took
}
캔버스에 의해 트리거된 동작.
resize Object 컨테이너 div의 크기가 변경되었을 때 다시 그리기 호출, 새 값으로 setSize () 호출 또는 새 너비 및 / 또는 높이 값으로 setOptions () 호출로 캔버스 크기가 조정되면 시작됩니다. 속성이 다음과 같이 구조화 된 객체를 전달합니다.:
{
  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
}
렌더링 모듈에 의해 트리거 된 동작 캔버스에 사용자 정의 요소를 그리는 데 사용할 수 있습니다.
initRedraw none 다시 그리기가 시작되기 전에 시작됩니다. 이 시점에서 시뮬레이션 단계가 완료되었습니다. 새 프레임을 그리기 전에 사용자 정의 요소를 이동하는 데 사용할 수 있습니다.
beforeDrawing canvas context 캔버스가 지워지고 크기가 조정되고보기 위치로 변환 된 후 모든 모서리와 노드가 그려지기 전에 시작됩니다. 네트워크 뒤에 그리는 데 사용할 수 있습니다.
afterDrawing canvas context 캔버스에 그리기가 완료되면 시작됩니다. 네트워크 위에 그리는 데 사용할 수 있습니다.
보기 모듈에 의해 트리거 된 동작.
animationFinished none 애니메이션이 완료되면 시작됩니다.
구성 모듈에 의해 트리거되는 동작.
configChange Object 사용자가 구성 기에서 옵션을 변경하면 시작됩니다. 옵션 객체는 setOptions 메소드와 함께 사용하거나 JSON.stringify ()를 사용하여 문자열화할 수 있습니다. 옵션을 네트워크에 수동으로 넣을 필요는 없습니다. 이 작업은 자동으로 수행됩니다. 이벤트를 사용하여 데이터베이스에 사용자 옵션을 저장할 수 있습니다


데이터 가져오기

네트워크에는 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 옵션

Vis에게 Gephi의 데이터로 수행 할 작업을 알려주는 데 사용할 수 있는 몇 가지 옵션이 있습니다.
이름 Type Defaul 설명
nodes.fixed Boolean true False이면 임포트 후 물리 모델에 따라 노드가 이동합니다. true이면 노드가 전혀 이동하지 않습니다. true로 설정하면 물리에서 무한 재귀 오류를 피하기 위해 노드 위치를 정의해야합니다.
nodes.parseColor Boolean false true이면 vis 파서가 색상을 구문 분석하여 테두리, highlighs 및 hover에 추가 색상을 생성합니다. False이면 노드가 제공된 색상이됩니다.
edges.inheritColor Boolean false true 인 경우 gephi에서 제공 한 색상이 무시되고 색상 상속 상속이 전역 설정과 함께 사용됩니다.

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);

Third party docs: