vis-network中文文档 - edges(边)

原文

完整配置项预览

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

边的配置项必须包含在名为“edges”的对象中。

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

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

:::warning

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

:::

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"
      }
    },
    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);

配置项详情

这些配置项也可以为每个边设置。

名称	类型	默认	说明
arrows	Object or String	undefined	使用默认配置绘制箭头（指向，标记等，下同），可以以arrows:'to, from,middle'、'to;from'等字符串形式来配置'开始'、'结束'、'中间'的箭头显示。 如果要更细致的控制箭头样式，请使用一个to、from、middle对象。
arrows.     to	Object or Boolean	Object	如果为true，则绘制一个指向to节点的，在边的to(终点)侧的箭头， 如果要更细致的控制箭头样式，请使用一个to对象。
arrows.     to.       enabled	Boolean	false	可选配置项，打开或关闭箭头。 如果为undefined但设置了scaleFactor属性，则将其设置为true
arrows.     to.       imageHeight	Number		图像箭头的高度。如果为undefined，则使用图像的高度。
arrows.     to.       imageWidth	Number		图像箭头的宽度。如果为undefined，则使用图像的宽度。
arrows.     to.       scaleFactor	Number	1	箭头缩放的比例因子
arrows.     to.       src	String		图像箭头的URL
arrows.     to.       type	String	arrow	边的to侧类型。可能的值有：'arrow', 'bar', 'circle', 'box', 'crow', 'curve', 'inv_curve', 'diamond', 'triangle', 'inv_triangle', 'vee'。
arrows.     middle	Object or Boolean	Object	同to，在边的middle(中间)的箭头。当arrows.middle.scaleFactor为负值时将翻转箭头的方向。
arrows.     from	Object or Boolean	Object	同to，在边的from(起点)的箭头。
arrowStrikethrough	Boolean	true	如果为false，则边将在箭头处停止。中间箭头不受此影响。
chosen	Object or Boolean	true	对选择及悬停做出反应 如果为true，则选择或悬停在边时将根据默认值更改其及标签的特性。 如果为false，则在选择边时不会更改其及标签的特性。 如果为Object，则在选择边时，可对边和标签特性进行更细致的调整。
chosen.     edge	Function or Boolean	undefined	如果为true，选择或悬停在边上将根据默认值更改其特性。 如果为false，则在选择边时不会更改其特性。 如果提供了函数，则在选择边时调用该函数。 function(values, id, selected, hovering) {   values.property = chosenValue; } 任何输入参数都可用于改变节点特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某边。 values中的可更改的属性如下： Property Edge Reference dashes 同 dashes toArrow 同 arrows.to.enabled toArrowScale 同 arrows.to.scaleFactor toArrowType 同 arrows.to.type middleArrow 同 arrows.middle.enabled middleArrowScale 同 arrows.middle.scaleFactor middleArrowType 同 arrows.middle.type fromArrow 同 arrows.from.enabled fromArrowScale 同 arrows.from.scaleFactor fromArrowType 同 arrows.from.type arrowStrikethrough 同 arrowStrikethrough color 同 color.color inheritsColor 同 color.inherit opacity 同 color.opacity hidden 同 hidden length 同 length shadow 同 shadow.enabled shadowColor 同 shadow.color shadowSize 同 shadow.size shadowX 同 shadow.x shadowY 同 shadow.y width 同 width
chosen.     label	Function or Boolean	undefined	如果为true，选择或悬停在边上将根据默认值更改其标签特性。 如果为false，则在选择边时不会更改其标签特性。 如果提供了函数，则在选择边时调用该函数。 function(values, id, selected, hovering) {   values.property = chosenValue; } 任何输入参数都可用于改变边特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某边。 values中的可更改的属性如下： Property Edge Reference color 同 font.color size 同 font.size face 同 font.face mod 同 modifier ('bold', 'italic', etc.) vadjust 同 font.vadjust strokeWidth 同 font.strokeWidth strokeColor 同 font.strokeColor
color	Object or String	Object	颜色对象包含了各种情况下边的颜色信息。 当边只需要一种颜色时，格式可为rgba(120,32,14,1), #ffffff或red。
color.     color	String	'#848484'	未选中或悬停在边上时的颜色（假设在交互模块中启用了悬停）。
color.     highlight	String	'#848484'	选中边时的颜色。
color.     hover	String	'#848484'	鼠标悬停在边缘上时的颜色（假设在交互模块中启用了悬停）。
color.     inherit	String or Boolean	'from'	当color、highlight或hover有值时，inherit将被设置为false。 inherit的可选值有: true, false, 'from','to','both'。 inherit为from时，边将从'from'侧的节点边框继承颜色。 inherit为to时，边将从to侧的节点边框继承颜色。 inherit为both时，边颜色为从'from'侧的节点边框颜色到to侧的节点边框颜色的渐变色。在这种情况下由于每次重新绘制时都会重新计算渐变，both的计算量很大（因为当节点移动时角度会改变）。
color.     opacity	Number	1.0	设置边的不透明度。值在0和1之间。
dashes	Array or Boolean	false	为true，绘制一系列短的方形虚线。数组格式：【短划线长度，间隙长度，短划线长度，间隙长度，短划线长度，间隙长度，。。。】,重复数组值，直到填充边距离。在大于11的IE版本中使用虚线时，将直线绘制，而不是平滑。在小于11版本的IE中将直线绘制而不是平滑线。
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	2	标签文本描边宽度，这个样式会覆盖上述的矩形样式。
font.     strokeColor	String	'#ffffff'	标签文本描边颜色，在strokeWidth大于0时显示。
font.     align	String	'horizontal'	标签与边的对齐方式，有 'horizontal(水平)','top(顶部)','middle(中间)','bottom(底部)'。默认值horizontal为标签水平对齐，将不考虑边的方向。 如果选择了horizontal以外的选项，标签将根据边对齐。
font.     vadjust	String	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	调整标签文本中的等宽字体的垂直位置，值越大离节点越远。
from	Number or String		边位于两个节点之间，from节点,to节点。这是定义from节点的位置。 必须提供相应的节点ID。这仅适用于单个边。
hidden	Boolean	false	如果为true，则不会显示边。但是它仍然是物理模拟的一部分。
hoverWidth	Number or Function	0.5	鼠标悬停在边上时边的宽度（假设在交互模块中启用了悬停）。 如果值为Number，这个数字将被添加到宽度。因为宽度可以通过value和scale来更改，所以这种方式可能无法呈现出最佳显示效果。为了解决这个问题，您可以提供一个函数。 例子: var options: {     edges: {         hoverWidth: function (width) {             return width+1; } }} 它接收边的数字宽度。在这个简单的例子中，我们将宽度增加1。 您可以在函数中使用任何合法语句，只要它最终返回一个Number值即可。
id	String	undefined	边的id。边的id是可选的。如果为undefined，则会将一个自动生成的UUID分配给边缘。只适用于单个边。
label	String	undefined	边的标签。HTML将不会起作用，因为关系图是基于HTML5 canvas。
labelHighlightBold	Boolean	true	选中边时标签是否变为粗体。
length	Number	undefined	在物理模拟中边的弹簧长度。该值会覆盖静止时的弹簧长度。
physics	Boolean	true	如果为true，边是物理模拟的一部分。如果是false，它就不会像弹簧一样。
scaling	Object	Object	如果提供了value选项，则边的宽度取决于这个对象中定义的属性。请记住，使用缩放时，忽略width选项。
scaling.     min	Number	1	如果节点具有值，则它们的大小由值，缩放函数和最小最大值决定。最小值是最小允许值。
scaling.     max	Number	15	最大缩放值。
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	in description	如果节点具有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的值
selectionWidth	Number or Function	1	选择边时边的宽度。 如果值为Number，这个数字将被添加到宽度。因为宽度可以通过value和scale来更改，所以这种方式可能无法呈现出最佳显示效果。为了解决这个问题，您可以提供一个函数。 例子: var options: {     edges: {         selectionWidth: function (width) {             return width*2; } }}
selfReferenceSize	Number	false	当to和from节点相同时，将绘制一个圆。这个值就是圆的半径。 如果需要自定义属性，请使用selfReference配置对象。
selfReference	Object	Object	同selfReferenceSize
selfReference.     size	Number	20	圆的半径
selfReference.     angle	Number	π/ 4	圆的位置（以弧度表示）。如果undefined，则它将位于右上角（π/ 4）。
selfReference.     renderBehindTheNode	Boolean	true	圆是否应该绘制成一个完整的圆，或者不应该与父节点重叠。
shadow	Object or Boolean	Object	如果为true，则节点使用默认设置投射阴影。可以使用shadow对象自定义。
shadow.     enabled	Boolean	false	打开或关闭阴影。如果undefined，但定义了此配置对象中的任何其它属性，则将其设置为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偏移。
smooth	Object or Boolean	Object	如果为true，则将以二次贝塞尔曲线绘制边。这种绘制方式比较耗时但是渲染效果要好过直线绘制。 动态平滑曲线和静态平滑曲线之间存在差异。动态平滑曲线绘制有一个不可见的支撑节点参与物理模拟。 如果有很多边，可以考虑使用与动态曲线不同类型的平滑曲线，以获得更好的性能。
smooth.     enabled	Boolean	true	打开和关闭平滑曲线。这是一个可选选项。如果定义了此配置对象中的任何其它属性，则将其设置为true。
smooth.     type	String	'dynamic'	可能的选项: 'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'。 使用动态时，边将有一个不可见的支撑节点来引导形状。这个节点是物理模拟的一部分。
smooth.     forceDirection	String or Boolean	false	用于分层布局的配置项，可选值有: ['horizontal', 'vertical', 'none']。 此选项仅用于cubicbezier曲线。如果为true，则选择水平方向，如果为false，则选择较大的方向(节点间距离为 x vs 节点间距离为 y)。 如果 x 距离较大，则为水平距离。
smooth.     roundness	Number	0.5	值范围：0 .. 1.0。此参数调整除动态外所有类型的平滑曲线的平滑度（圆度）。
title	String	undefined	当用户悬停在节点上时显示的标题。
to	Number or String		边缘位于两个节点之间，一从个到另一个。这是定义“to”节点的位置。必须提供相应的节点ID。这自然只适用于单个边。
value	Number	undefined	设置值后，将使用上面定义的缩放对象中的选项缩放边的宽度。.
width	Number	1	边缘的宽度。如果设置了值，则不使用.
widthConstraint	Number, Boolean or Object	false	如果为false，则不限制宽度。如果指定了值，则将节点的最小和最大宽度设置为该值。节点标签将在空格处换行以保持在最大值以下，如果小于该值，则节点的宽度将设置为最小值。
widthConstraint.     maximum	Number	undefined	如果指定了值，则将节点的最大宽度设置为该值。节点标签将在空格处换行，以保持在最大值以下。