Network - interaction

network와의 모든 사용자 상호 작용에 사용됩니다. 내비게이션 버튼 및 팝업뿐만 아니라 마우스 및 터치 이벤트를 처리합니다.

옵션

상호 작용 모듈의 옵션은 ‘interaction’이라는 제목의 object에 포함되어야 합니다.

전체 옵션 또는 요약 옵션을 클릭하여 이러한 옵션들의 사용 방법을 확인하십시오.

// these are all options in full.
var options = {
  interaction:{
    dragNodes:true,
    dragView: true,
    hideEdgesOnDrag: false,
    hideEdgesOnZoom: false,
    hideNodesOnDrag: false,
    hover: false,
    hoverConnectedEdges: true,
    keyboard: {
      enabled: false,
      speed: {x: 10, y: 10, zoom: 0.02},
      bindToWindow: true,
      autoFocus: true,
    },
    multiselect: false,
    navigationButtons: false,
    selectable: true,
    selectConnectedEdges: true,
    tooltipDelay: 300,
    zoomSpeed: 1,
    zoomView: true
  }
}

network.setOptions(options);

// only the options that have shorthand notations are shown.
var options = {
  interaction:{
    keyboard: false
  }
}

network.setOptions(options);

이것은 공개 API의 모든 메소드 목록입니다. 모든 개별적인 모듈에서 수집되었습니다.

이름	Type	Default	설명
dragNodes	Boolean	`true`	true인 경우, 고정되지 않은 노드를 사용자가 드래그할 수 있습니다.
dragView	Boolean	`true`	true인 경우, 사용자가 화면을 드래그할 수 있습니다.
hideEdgesOnDrag	Boolean	`false`	true인 경우, 화면을 드래그할 때 Edge가 그려지지 않습니다. 이를 통해 드래그 응답 속도가 크게 향상되어 UX가 향상됩니다.
hideEdgesOnZoom	Boolean	`false`	true인 경우, 화면을 확대 / 축소할 때 Edge가 그려지지 않습니다. 이를 통해 확대 / 축소에 대한 응답 속도가 크게 향상되어 UX가 향상됩니다.
hideNodesOnDrag	Boolean	`false`	true인 경우, 화면을 드래그할 때 Node가 그려지지 않습니다. 이를 통해 드래그 응답 속도가 크게 향상되어 UX가 향상됩니다.
hover	Boolean	`false`	true인 경우, 마우스로 Node 위에서 움직일 때 Node가 hover 색상을 사용합니다.
hoverConnectedEdges	Boolean	`true`	true인 경우, Node 위로 마우스를 가져가면 연결 Edge가 강조표시가 됩니다.
keyboard	Object or Boolean	`Object`	true인 경우, 키보드 단축키가 디폴트 설정으로 활성화됩니다. 추가적인 사용자 정의를 위해 object를 할당할 수 있습니다.
keyboard.enabled	Boolean	`false`	키보드 단축키 사용을 활성화하거나 비활성화합니다. 이 옵션이 정의되어 있지 않으면 이 object의 속성이 정의되어 있을 때 true로 설정됩니다.
keyboard.speed.x	Number	`1`	키를 누르거나 내비게이션 버튼을 누를 때 뷰가 x 방향으로 이동하는 속도입니다.
keyboard.speed.y	Number	`1`	키를 누르거나 내비게이션 버튼을 누를 때 뷰가 y 방향으로 이동하는 속도입니다.
keyboard.speed.zoom	Number	`0.02`	키를 누르거나 내비게이션 버튼을 누르면 뷰가 확대 / 축소되는 속도입니다.
keyboard.bindToWindow	Boolean	`true`	키보드 단축키를 창에 바인딩하면, 포커스가 있는 DOM object에 관계없이 작동합니다. 페이지에 network가 여러 개인 경우, 이 설정을 false로 설정하면, 키보드 단축키가 포커스가 있는 network에서만 작동합니다.
multiselect	Boolean	`false`	true인 경우, 길게 누르기 (또는 터치) 와 control-click이 선택 항목에 추가된다.
navigationButtons	Boolean	`false`	true인 경우, 내비게이션 버튼이 network 캔버스에 그려집니다. 이들은 HTML 버튼이며 CSS를 사용하여 사용자가 정의할 수 있습니다.
selectable	Boolean	`true`	true인 경우, 사용자가 노드와 Edge를 선택할 수 있습니다.
selectConnectedEdges	Boolean	`true`	true인 경우, Node를 선택할 때, 연결 Edge가 강조 표시됩니다.
tooltipDelay	Number	`300`	Node나 Edge에 정의된 `'title'` 필드가 있다면, 팝업 툴팁으로 표시될 수 있습니다. 툴팁 자체는 CSS를 사용하여 완전히 스타일을 지정할 수 있는 HTML 요소입니다. 지연 시간은 툴팁이 표시되기까지 걸리는 시간(밀리 초)입니다.
zoomSpeed	Number	`1`	확대 / 축소가 얼마나 빠르거나 거칠거나 느리고 / 정밀합니다.
zoomView	Boolean	`true`	true인 경우, 사용자가 확대할 수 있습니다.

Third party docs: