Network - edges

Edge의 생성 및 삭제를 처리하고, 전역 Edge 옵션 및 스타일을 포함합니다.

옵션

Edge에 대한 옵션들은 'edges'라는 이름의 object에 포함되어야 합니다. 이러한 모든 옵션들은 각 Edge별로 정의할 수도 있습니다. 반드시, 'id'는 전체적으로 정의하면 안 되고 Edge 별로 정의되어야 합니다. 전역 Edge object에 정의된 옵션들은 모든 Edge들에 적용됩니다. Edge에 자체적인 옵션이 있는 경우, 전역 Edge 옵션 대신 그 해당 옵션이 적용이 됩니다.

Edge에 옵션을 지정하면, 해당 속성에 대한 전역 옵션을 재정의해야 한다. 그런 다음 해당 옵션을 null 로 설정하면, 디폴트값으로 되돌아갑니다.

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

• 옵션 숨기기
• 전체 옵션
• 요약 옵션

// these are all options in full.
var options = {
  edges:{
    arrows: {
      to: {
        enabled: false,
        imageHeight: undefined,
        imageWidth: undefined,
        scaleFactor: 1,
        src: undefined,
        type: "arrow"
      },
      middle: {
        enabled: false,
        imageHeight: 32,
        imageWidth: 32,
        scaleFactor: 1,
        src: "https://visjs.org/images/visjs_logo.png",
        type: "image"
      },
      from: {
        enabled: false,
        imageHeight: undefined,
        imageWidth: undefined,
        scaleFactor: 1,
        src: undefined,
        type: "arrow"
      }
    },
    endPointOffset: {
      from: 0,
      to: 0
    },
    arrowStrikethrough: true,
    chosen: true,
    color: {
      color:'#848484',
      highlight:'#848484',
      hover: '#848484',
      inherit: 'from',
      opacity:1.0
    },
    dashes: false,
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 2, // px
      strokeColor: '#ffffff',
      align: 'horizontal',
      multi: false,
      vadjust: 0,
      bold: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold'
      },
      ital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'italic',
      },
      boldital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold italic'
      },
      mono: {
        color: '#343434',
        size: 15, // px
        face: 'courier new',
        vadjust: 2,
        mod: ''
      }
    },
    hidden: false,
    hoverWidth: 1.5,
    label: undefined,
    labelHighlightBold: true,
    length: undefined,
    physics: true,
    scaling:{
      min: 1,
      max: 15,
      label: {
        enabled: true,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          var scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    selectionWidth: 1,
    selfReferenceSize:20,
    selfReference:{
        size: 20,
        angle: Math.PI / 4,
        renderBehindTheNode: true
    },
    shadow:{
      enabled: false,
      color: 'rgba(0,0,0,0.5)',
      size:10,
      x:5,
      y:5
    },
    smooth: {
      enabled: true,
      type: "dynamic",
      roundness: 0.5
    },
    title:undefined,
    value: undefined,
    width: 1,
    widthConstraint: false
  }
}

network.setOptions(options);

// here all options that have shorthand notations are shown.
var options = {
  edges:{
    arrows: 'to, from',
    color: 'red',
    font: '12px arial #ff0000',
    scaling:{
      label: true,
    },
    shadow: true,
    smooth: true,
  }
}

network.setOptions(options);

이 옵션들은 각 Edge별로 적용시킬 수 있다.

  function(values, id, selected, hovering) {
    values.property = chosenValue;
  }

  function(values, id, selected, hovering) {
    values.property = chosenValue;
  }

var options: {
  edges: {
    hoverWidth: function (width) {return width+1;}
  }
}

function (min,max,total,value) {
  if (max === min) {
    return 0.5;
  }
  else {
    var scale = 1 / (max - min);
    return Math.max(0,(value - min)*scale);
  }
}

var scale = customScalingFunction(min,max,total,value);
var diff = maxWidth - minWidth;
myWidth = minWidth + diff * scale;

var options: {
  edges: {
    selectionWidth: function (width) {return width*2;}
  }
}