visjs入门--模块nodes

本文介绍了VisJS库中的nodes模块,详细说明了节点的选项配置,包括如何在全球节点对象中定义选项以及如何为单个节点指定特殊选项。同时提到,节点的ID应该是唯一的,且节点选项可以覆盖全局或组选项。还提供了相关链接以供进一步学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

nodes

节点的选项必须包含在名为'nodes'的对象中。所有这些选项也可以由每个节点提供。显然,“ID”不应该全局定义,而是每个节点定义。全局节点对象中定义的选项应用于所有节点。如果一个节点有自己的选项,那么这些节点将被用来代替全局选项。
当您给节点一个选项时,您将重写该属性的全局选项,并且如果该节点处于组中,则将重写该属性的组选项。如果您将该选项设置为NULL,则它将返回到默认值。

// 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,
      size: 50,  //50,
      color:'#2B7CE9'
    },
    image: undefined,
    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
    }
    size: 25,
    title: undefined,
    value: undefined,
    widthConstraint: false,
    x: undefined,
    y: undefined
  }
}

network.setOptions(options);
参数名类型默认值描述
borderWidthNumber1节点边界的宽度。,单位为px。
borderWidthSelectedNumber2节点被选中时的边界宽度。单位为px。当未定义时,使用边界宽度* 2。
brokenImageStringundefined当将形状设置为imagecircularImage时,如果图像选项中提供的URL无法解析,则该选项可以是备份映像的URL。
chosenObject or Booleantrue当选择或威胁,生长在一个节点将信息和它的变化的特点,根据标签的默认。当褶皱,没有改变的节点或其标签将occur冰淇淋当节点的选择。如果对象是supplied冰颗粒,单板调整的节点和标签的特点是可用的节点选择当冰。
chosen.nodeFunction or Booleanundefined当选择或威胁,生长在一个节点将根据其特性变化的违约。如果提供一个函数,则在选择节点时调用它。 function(values, id, selected, hovering) {values.property = chosenValue;}任何传入的参数可用于确定特性变化。如果一个属性没有被提供的函数指定,它将保持不变。可以将特定功能分配给其选项中的每个特定节点,或者分配给网络节点选项中的所有节点。
chosen.labelFunction or Booleanundefined当true的时候,在一个节点上选择或悬停将会改变其标签的特征。当节点被选中时,节点的标签不会发生变化。如果提供了一个函数,则在选择节点时调用它。function(values, id, selected, hovering) { values.property = chosenValue; }任何传入的参数都可以用来确定特征的变化。如果一个属性不是由提供的函数指定的,那么它将保持不变。一个特定的函数可以被分配给它的选项中的每个特定的节点,或者被分配到网络nodes的所有选项中。

相关链接

1、程序员分类目录导航
2、visjs入门1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值