Network - nodes

Node의 생성과 소멸을 처리하고 전체적인 Node의 옵션들과 스타일을 포함합니다.

옵션

Node에 대한 옵션은 'nodes'라 이름 붙은 object에 대한 Node들을 포함하고 있어야합니다. 이러한 모든 옵션들은 또한 각각의 Node에 대해서도 제공되어져야 합니다. 명백하게, 'id'는 전체 Node가 아닌 해당 Node에 대해서만 정의되어야 합니다. 옵션은 전체적인 Node object에 대해 정의되었고, 모든 Node에 적용됩니다. 만약 Node가 자기 자신에 대한 옵션을 가지고 있다면, 이는 전체적인 옵션 대신에 사용되어 질 것입니다.

당신에게 Node 옵션 하나가 주어졌을 때, 그러한 특성에 대한 전체적인 옵션과 그룹에 속한 Node라면 그 특성에 대한 그룹 옵션 또한 오버라이드 할 것입니다. 그리고나서 null 옵션을 설정한다면, 그것은 default 값으로 되돌아갈 것입니다.

이러한 옵션들이 어떻게 사용하는것이 지원되는지 보길 위해서는 전체 옵션 또는 요약 옵션 클릭하시오.

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

// these are all options in full.
var options = {
  nodes:{
    borderWidth: 1,
    borderWidthSelected: 2,
    brokenImage:undefined,
    chosen: true,
    color: {
      border: '#2B7CE9',
      background: '#97C2FC',
      highlight: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      },
      hover: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      }
    },
    fixed: {
      x:false,
      y:false
    },
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 0, // px
      strokeColor: '#ffffff',
      align: 'center',
      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: ''
      }
    },
    group: undefined,
    heightConstraint: false,
    hidden: false,
    icon: {
      face: 'FontAwesome',
      code: undefined,
      weight: undefined,
      size: 50,  //50,
      color:'#2B7CE9'
    },
    image: undefined,
    imagePadding: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    label: undefined,
    labelHighlightBold: true,
    level: undefined,
    mass: 1,
    physics: true,
    scaling: {
      min: 10,
      max: 30,
      label: {
        enabled: false,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          let scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    shadow:{
      enabled: false,
      color: 'rgba(0,0,0,0.5)',
      size:10,
      x:5,
      y:5
    },
    shape: 'ellipse',
    shapeProperties: {
      borderDashes: false, // only for borders
      borderRadius: 6,     // only for box shape
      interpolation: false,  // only for image and circularImage shapes
      useImageSize: false,  // only for image and circularImage shapes
      useBorderWithImage: false,  // only for image shape
      coordinateOrigin: 'center'  // only for image and circularImage shapes
    }
    size: 25,
    title: undefined,
    value: undefined,
    widthConstraint: false,
    x: undefined,
    y: undefined
  }
}

network.setOptions(options);

// only the options that have shorthand notations are shown.
var options = {
  nodes:{
    color: '#ff0000',
    fixed: false,
    font: '12px arial red',
    scaling: {
      label: true
    },
    shadow: true
  }
}
network.setOptions(options);

이러한 옵션들은 각 개별 Node에 대해 역시 설정되어 있습니다. 모든 개별 옵션이 여기에 설명되어 있습니다:

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

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

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 = maxSize - minSize;
mySize = minSize + diff * scale;