vis-network中文文档 - nodes(节点)

原文

处理节点的创建和删除，及全局节点配置和样式

节点的配置项必须包含在名为“nodes”的对象中。

单个节点也可以添加配置项。因此，应当为每个节点定义“id”属性。全局节点配置项将作用于所有节点。

//自定义一个边框宽为2，边框颜色为红色的节点
const nodes = [{ id: 1,label:'测试', borderWidth: 2,color: { border: 'red'}... }]

警告：为节点单独添加配置项后，将覆盖该节点对应的全局配置，如果该节点位于组中，还将覆盖该节点对应的的组配置。如果你在随后将该节点配置项设置为``null`，节点配置将恢复为默认值。

完整配置项预览

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'
      }
    },
    opacity: 1,
    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
    }
    size: 25,
    title: undefined,
    value: undefined,
    widthConstraint: false,
    x: undefined,
    y: undefined
  }
}

network.setOptions(options);

配置项详情

名称	类型	默认值	说明
borderWidth	Number	1	节点边框的宽度.
borderWidthSelected	Number	2	选中节点的边框宽度。 未定义时为borderwidth*2。
brokenImage	String	undefined	图像的备用URL。 当shape设置为image或circularimage且无法解析image配置项中提供的URL时起作用。
chosen	Object or Boolean	true	对选择及悬停做出反应 如果为true，则选择或悬停在节点将根据默认值更改其及标签的特性。 如果为false，则在选择节点时不会更改其及标签的特性。 如果为Object，则在选择节点时，可对节点和标签特性进行更细致的调整。
chosen.     node	Function or Boolean	undefined	如果为true，选择或悬停在节点上将根据默认值更改其特性。 如果为false，则在选择节点时不会更改其特性。 如果提供了函数，则在选择节点时调用该函数。 function(values, id, selected, hovering) {   values.property = chosenValue; } 任何输入参数都可用于改变节点特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某节点。 values中的可更改的属性如下： Property Node Reference color 同 color.background borderWidth 同 borderWidth borderColor 同 color.border size 同 size borderDashes 同 shapeProperties.borderDashes borderRadius 同 shapeProperties.borderRadius shadow 同 shadow.enabled shadowColor 同 shadow.color shadowSize 同 shadow.size shadowX 同 shadow.x shadowY 同 shadow.y
chosen.     label	Function or Boolean	undefined	如果为true，选择或悬停在节点上将根据默认值更改其标签特性。 如果为false，则在选择节点时不会更改其标签特性。 如果提供了函数，则在选择节点时调用该函数。 function(values, id, selected, hovering) {   values.property = chosenValue; } 任何输入参数都可用于改变节点特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某节点。 values中的可更改的属性如下： Property Node Reference color 同 color.background size 同 font.size face 同 font.face mod 字体修饰(粗体、斜体等) vadjust 同 font.vadjust strokeWidth 同 font.strokeWidth strokeColor 同 font.strokeColor
color	Object or String	Object	颜色对象包含了各种情况下节点的颜色信息。 当节点只需要一种颜色时，格式可为rgba(120,32,14,1), #ffffff或red。
color.     border	String	'#2B7CE9'	未选中或悬停在节点上时其边框颜色（假设在交互(interaction)模块中启用了悬停）。
color.     background	String	'#D2E5FF'	未选中或悬停在节点上时其背景颜色（假设在交互模块中启用了悬停）。
color.     highlight	Object or String	Object	选中节点时的颜色。你可以只提供一个字符串颜色值或一个颜色对象。
color.     highlight.         border	String	'#2B7CE9'	选中节点时其边框的颜色。
color.     highlight.         background	String	'#D2E5FF'	选中节点时其背景的颜色。
color.     hover	Object or String	Object	鼠标悬停在节点上时的节点颜色（假设在交互模块中启用了悬停）。
color.     hover.         border	String	'#2B7CE9'	鼠标悬停在节点上时其边框的颜色（假设在交互模块中启用了悬停）。
color.     hover.         background	String	'#D2E5FF'	鼠标悬停在节点上时其背景颜色（假设在交互模块中启用了悬停）。
fixed	Object or Boolean	Object	如果为true，节点不会移动，但还是物理模拟的一部分。 定义为对象时，可以禁用X或Y方向的移动。
fixed.     x	Boolean	false	如果为true，节点不能沿X方向移动。
fixed.     y	Boolean	false	如果为true，节点不能沿Y方向移动。
font	Object or String	false	此对象定义标签的详细信息。还支持size face color形式的简写，例如：14px arial red。
font.     color	String	'#343434'	标签文本的颜色。
font.     size	Number	14	标签文本的大小。
font.     face	String	'arial'	标签文本的字体（或字体系列）。
font.     background	String	undefined	用提供的颜色给标签绘制一个矩形背景。
font.     strokeWidth	Number	0	标签文本描边宽度，这个样式会覆盖上述的矩形样式。
font.     strokeColor	String	'#ffffff'	标签文本描边颜色，在strokeWidth大于0时显示。
font.     align	String	'center'	标签的对齐方式，有left,center,right。
font.     vadjust	Number	0	调整标签文本的垂直位置，值越大离节点越远。
font.     multi	Boolean or String	false	如果为false，标签将被视为用基本字体绘制的纯文本。 如果为true或HTML（带有粗体、斜体和代码标记等）。 如果为markdown或md（带有粗体、斜体和代码标记） 可以分别在font.bold，font.ital，font.boldital和font.mono属性下设置粗体，斜体，粗斜体和等宽字体。
font.     bold	Object or String	false	定义标签中粗体字体的样式。支持size face color形式的简写，例如：14px arial red。
font.     bold.         color	String	'#343434'	标签文本中粗体字体的颜色。默认为基本字体的颜色。
font.     bold.     size	Number	14	标签文本中粗体字体的大小。默认为基本字体的大小。
font.     bold.         face	String	'arial'	标签文本中粗体字体的字体（或字体系列）。默认为基础字体的字体。
font.     bold.         mod	String	'bold'	在确定标签文本中的粗体字体时添加到face和size的字符串。
font.     bold.         vadjust	String	0	调整标签文本中的粗体字体的垂直位置，值越大离节点越远。
font.     ital	Object or String	false	定义标签中斜体字体的详细信息。支持size face color形式的简写，例如：14px arial red。
font.     ital.         color	String	'#343434'	标签文本中斜体字体的颜色，默认为基本字体的颜色。
font.     ital.         size	Number	14	标签文本中斜体字体的大小。默认为基本字体的大小。
font.     ital.         face	String	'arial'	标签文本中斜体字体的字体（或字体系列）。默认为基础字体的字体。
font.     ital.         mod	String	'italic'	在确定标签文本中的斜体字体时添加到face和size的字符串。
font.     ital.         vadjust	String	0	调整标签文本中的斜体字体的垂直位置，值越大离节点越远。
font.     boldital	Object or String	false	定义标签中粗斜体字体的详细信息。支持size face color形式的简写，例如：14px arial red。
font.     boldital.         color	String	'#343434'	标签文本中粗斜体字体的颜色。默认为基本字体的颜色。
font.     boldital.         size	Number	14	标签文本中粗斜体字体的大小。默认为基本字体的大小。
font.     boldital.         face	String	'arial'	标签文本中粗斜体字体的字体（或字体系列）。默认为基础字体的字体。
font.     boldital.         mod	String	'bold'	在确定标签文本中粗斜体字体时添加到face和size的字符串。
font.     boldital.         vadjust	String	0	调整标签文本中的粗斜体字体的垂直位置，值越大离节点越远。
font.     mono	Object or String	false	定义标签中单空格字体的详细信息。还支持size face color形式的速记，例如： 15px courier red。
font.     mono.         color	String	'#343434'	标签文本中等宽字体的颜色。默认为基本字体的颜色。
font.     mono.         size	Number	15	标签文本中等宽字体的大小。默认为基本字体的大小。
font.     mono.         face	String	'courier new'	标签文本中等宽字体的字体（或字体系列）。
font.     mono.         mod	String	' '	在确定标签文本中的等宽字体时添加到face和size的字符串。
font.     mono.         vadjust	String	2	调整标签文本中的等宽字体的垂直位置，值越大离节点越远。
group	String	undefined	节点的归属组。
heightConstraint	Number, Boolean or Object	false	如果为false，则不受高度限制。 如果指定了高度，则该值将用作节点的最小高度。如果节点高度小于该值，则将其高度设置为此最小高度。
heightConstraint.     minimum	Number	undefined	该值将用作节点的最小高度。如果节点高度小于该值，则将其高度设置为此最小高度。
heightConstraint.     valign	String	'middle'	偏移位置，值可为top、middle和bottom。 当标签文本的高度小于最小值（包括任何上下边距），则标签文本将垂直偏移到指定位置。
hidden	Boolean	false	如果为true，则不会显示节点。但是它仍然是物理模拟的一部分。
icon	Object	Object	这些选项仅在形状设置为icon时使用。
icon.     face	String	'FontAwesome'	可能值是给定页面上加载的任何字体，例如 FontAwesome或Ionicons。
icon.     code	String	undefined	图标的代码(名称) ，例如'\uf007'。
icon.     size	Number	50	图标的大小。
icon.     color	String	'#2B7CE9'	图标的颜色。
icon.     weight	Number or String	undefined	强制性设置字重， Font Awesome 5只有在字重被强制设置为粗体或700时才能正常工作。 如果设置了这个选项，请选择更大的字体尺寸而不是粗体字体。
id	String	undefined	节点的id。节点的id是必需且唯一的。
image	Object or String	undefined	当形状设置为image或circularImage时，此选项应为图像的URL。如果找不到图像，可以使用brokenimage选项。
image.     unselected	String	undefined	未选中（默认）图像的URL。
image.     selected	String	undefined	选中图像的URL。
imagePadding	Object or Number	0	设置图片的内边距。
imagePadding.     top	Number	0	设置图片的上内边距。
imagePadding.     right	Number	0	设置图片的右内边距。
imagePadding.     bottom	Number	0	设置图片的下内边距。
imagePadding.     left	Number	0	设置图片的左内边距。
label	String	undefined	在节点中或节点下显示的一段文本，位置取决于设置的形状。
labelHighlightBold	Boolean	true	选中节点时其标签是否变为粗体。
level	Number	undefined	使用hierarchical布局时，该值将决定节点的位置。
margin	Object or Number	5	标签的外边距。该配置项仅在形状设置为box, circle, database, icon 或 text时使用。
margin.     top	Number	5	标签的上外边距。
margin.     right	Number	5	标签的右外边距。
margin.     bottom	Number	5	标签的下外边距。
margin.     left	Number	5	标签的左外边距。
mass	Number	1	Barneshut物理模型(默认启用)是基于一个反重力模型的,通过增加节点的质量，可以增加节点之间的排斥力。 不建议将该值设为介于0和1之间的值。 不允许设为负值或零值。否则将抛出一个控制台错误并设置为1。
physics	Boolean	true	如果为false，则节点不是物理模拟的一部分。除了手动拖动外，它不会移动。
scaling	Object	Object	节点缩放。 所有节点形状都可以缩放，但ellipse, circle, database, box, text形状只有在启用标签缩放时才会有效， 而image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square 和 icon形状始终可以缩放。 请注意，使用缩放时，将忽略大小选项。
scaling.     min	Number	10	如果节点具有值，则它们的大小由值，缩放函数和最小最大值决定。最小值是最小允许值。
scaling.     max	Number	30	最大缩放值。
scaling.     label	Object or Boolean	Object	是否允许标签缩放。
scaling.     label.         enabled	Boolean	false	打开或关闭标签的缩放。如果未定义此配置项，但定义了此配置对象中的任何其它属性，则将其设置为true。
scaling.     label.         min	Number	14	缩放时标签的最小字体大小。
scaling.     label.         max	Number	30	缩放时标签的最大字体大小。
scaling.     label.         maxVisible	Number	30	标签放大时，字体也会放大。可以使用此选项限制可感知的字体大小。如果设置为30，则字体将永远不会比以100％缩放的30号字体大。
scaling.     label.         drawThreshold	Number	5	标签缩小时，字体将被缩小。这定义了字体绘制时的下限。使用字体缩放时，可以将其与maxVisible一起使用，以便在缩小时显示重要节点的标签，而在放大时仅显示其余节点。
scaling.     customScalingFunction	Function		如果节点具有value字段，此函数将根据节点的值确定节点大小的缩放方式。默认函数为:  function (min,max,total,value) {   if (max === min) {     return 0.5;   } else {     var scale = 1 / (max - min);     return Math.max(0,(value - min)*scale);  }} 函数参数为最小值、最大值、所有值的总和、它所处理的节点或边的值。该必须返回一个介于0和1之间的值。 然后计算节点和边的大小的语句如下: var scale = customScalingFunction(min,max,total,value); var diff = maxSize - minSize; mySize = minSize + diff * scale; 请注意：maxSize和minSize是配置项中scaling.max和scaling.min的值
shadow	Object or Boolean	Object	如果为true，则节点使用默认设置投射阴影。可以使用shadow对象自定义。
shadow.     enabled	Boolean	false	打开或关闭阴影。如果未定义此选项，但定义了此配置对象中的任何其它属性，则将其设置为true。
shadow.     color	String	'rgba(0,0,0,0.5)'	阴影的颜色。支持的格式有rgb(255,255,255)、rgba(255,255,255,1)和#ffffff。
shadow.     size	Number	10	阴影的模糊大小。
shadow.     x	Number	5	X偏移。
shadow.     y	Number	5	Y偏移。
shape	String	'ellipse'	定义节点的外观。有两种类型的节点。 一类是标签在节点内部: ellipse, circle, database, box, text 另一类是标签在节点下面: image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square和 icon。
shapeProperties	Object	Object	特定形状的配置项。
shapeProperties.     borderDashes	Array or Boolean	false	此配置项适用于所有有边框的形状。显示为一系列短的方形虚线。数组格式：【短划线长度，间隙长度】。 还可以使用布尔值，false为禁用，true时为默认值[5,15]。
shapeProperties.     borderRadius	Number	6	此配置项仅用于box形状，定义形状圆角的程度。
shapeProperties.     interpolation	Boolean	true	此配置项仅适用于image和circularImage。如果为真，则图像在缩小后会以牺牲计算时间为代价而生成更好的图像。
shapeProperties.     useImageSize	Boolean	false	此配置项仅适用于image和circularImage。如果为false，则使用size选项；如果为true，则使用图像的大小。 重要提示：如果设置为true，则无法使用value选项缩放图像！
shapeProperties.     useBorderWithImage	Boolean	false	此配置项仅适用于image形状。如果为true，在image形状后绘制一个有背景色（使用color配置项）、有边框（使用border配置项）的矩形。
size	Number	25	用于确定标签不在节点内部的节点的大小。这些形状是: image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square 和 icon。
title	String or Element	undefined	当用户悬停在节点上时显示的标题。标题可以是HTML元素或包含纯文本或HTML的字符串。
value	Number	undefined	设置值后，将使用上面定义的缩放对象中的配置项缩放节点。
widthConstraint	Number, Boolean or Object	false	如果为false，则不限制宽度。如果指定了值，则将节点的最小和最大宽度设置为该值。节点标签将在空格处换行以保持在最大值以下，如果小于该值，则节点的宽度将设置为最小值。
widthConstraint.     minimum	Number	undefined	如果指定了值，则将节点的最小宽度设置为该值。如果小于该值，则节点的宽度将设置为最小值。
widthConstraint.     maximum	Number	undefined	如果指定了值，则将节点的最大宽度设置为该值。节点标签将在空格处换行，以保持在最大值以下。
x	Number	undefined	给节点设置初始X位置。使用分层布局时，布局引擎根据视图类型设置节点的X或Y位置。另一个值保持不变。使用stabilization（稳定）时，稳定位置可能与初始位置不同。要将节点固定到该位置，请使用physics或fixed配置项。
y	Number	undefined	给节点设置初始Y位置。使用分层布局时，布局引擎根据视图类型设置节点的X或Y位置。另一个值保持不变。使用stabilization（稳定）时，稳定位置可能与初始位置不同。要将节点固定到该位置，请使用physics或fixed配置项。