visjs入门--模块edges

edges

edges的选项必须包含在标题为“edges”的对象中。所有这些选项也可以每个edges提供。显然，“ID”不应该全局定义，而是每个edges的定义。在全局edges对象中定义的选项应用于所有edges。如果一个edges有自己的选项，那么这些边将被用来代替全局选项。

当您给了一个edges一个选项时，您将重写该属性的全局选项。如果您将该选项设置为NULL，则它将返回到默认值。

// these are all options in full.
var options = {
  edges:{
    arrows: {
      to:     {enabled: false, scaleFactor:1, type:'arrow'},
      middle: {enabled: false, scaleFactor:1, type:'arrow'},
      from:   {enabled: false, scaleFactor:1, 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,
    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',任何与任何分离符号的组合都很好。如果你想控制箭头的大小，你可以提供一个object。
arrows.to	Object or Boolean	Object	当为true时，绘制“edge”箭头上的箭头，指向默认设置的“to”节点。要自定义箭头的大小，请提供一个object。
arrows.to.enabled	Boolean	false	打开或关闭箭头。此选项是可选的，如果未定义并且设置了scaleFactor属性，将启用为true。
arrows.to.scaleFactor	Number	1	这个选项允许你改变箭头的大小。
arrows.to.type	String	arrow	箭头端点的类型。可能的值是：arrow, bar, circle
arrows.middle	Object or Boolean	Object	类似于“to”对象，但在边缘的中心有箭头。箭头的方向可以通过使用arrows.middle.scaleFactor 设置的负值翻转。
arrows.from	Object or Boolean	Object	与对象完全相同，但在边缘的节点上有箭头。
arrowStrikethrough	Boolean	true	当为false时，关系线会在箭头处断开,关系线与箭头之间存在一定的空隙 。如果你有粗线条，并且希望箭头在一点结束，这可能是有用的。中间箭头不受此影响。
chosen	Object or Boolean	true	当为true时，在节点上选择或悬停将根据默认情况改变它和标签的特性。当false时，选中某个节点后，该节点的关系线样式不会再被改变（一般是加粗或者颜色加深）。如果提供一个对象，当选择一个节点时，节点和标签特性的细粒度调整是可用的。
chosen.edge	Function or Boolean	undefined	当为true时，在节点上选择或悬停将根据默认值改变其特性。当false时，当选择节点时，节点不会发生变化。如果提供一个函数，则在选择节点时调用它。function(values, id, selected, hovering) {values.property = chosenValue;}。任何传入的参数可用于确定特性变化。如果一个属性没有被提供的函数指定，它将保持不变。可以将特定功能分配给其选项中的每个特定边缘，或者分配给网络edges选项中的所有选项。
chosen.label	Function or Boolean	undefined	当为true时，在边缘上选择或悬停将根据默认情况改变其标签的特性。当false时，当选择边缘时，边缘标签不会发生变化。如果提供一个函数，则在选择边缘时调用它。function(values, id, selected, hovering) {values.property =chosenValue; }。任何传入的参数可用于确定特性变化。如果一个属性没有被提供的函数指定，它将保持不变。可以将特定功能分配给其选项中的每个特定边缘，或者分配给网络edges选项中的所有选项。
color	Object or String	Object	颜色对象包含在每种情况下的边缘的颜色信息。当边缘只需要一种颜色，一种颜色值比如:'rgb(120,32,14)','#ffffff' 或者'red',那么直接修改该属性来改变颜色。
color.color	String	‘#848484’	当未被选择或悬停时，边缘的颜色（假设在交互模块中启用了悬停）。
color.highlight	String	‘#848484’	选择边缘时的颜色。
color.hover	String	‘#848484’	当鼠标悬停在其上时，边缘的颜色（假设在交互模块中启用了悬停）。
color.inherit	String or Boolean	‘from’	如果color、highlight、hover有一个被设置，该属性就会被设置为false！支持选项是：true, false, 'from','to','both'。默认值是'from'，它与true相同:边缘将继承来自'from'侧的节点边界的颜色。当设置为'to'时，将使用从'to'节点的边界颜色。当设置为'both'时，颜色将从颜色渐变为颜色。'both'都是计算密集型的，因为每次重绘都会重新计算梯度。这是必须的，因为当节点移动时角度发生变化。
color.opacity	Number	1.0	在不手动改变所有颜色的情况下设置边缘的不透明度可能是有用的。不透明度选项将转换所有颜色（也当使用继承时）以坚持提供的不透明度。不透明度选项的允许范围在0和1之间。这只做了一次，所以性能影响不太大。
dashes	Array or Boolean	false	当为true时，边沿将绘制为虚线。可以通过提供数组来自定义破折号。数组格式: Array of numbers, gap length, dash length, gap length, dash length, … 等等。重复该阵列直到填充完为止。当在IE11以前的版本中使用虚线时，线条将被笔直绘制，而不是平滑。
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	字体背景。当不是undefined的而是一个颜色字符串时，将在提供颜色的标签后面画出一个背景矩形。
font.strokeWidth	Number	2	字体边线宽度。作为背景矩形的替代，可以在文本周围画出笔划。当提供高于0的值时，将画出笔划。
font.strokeColor	String	‘#ffffff’	字体边线颜色。
font.align	String	‘horizontal’	字体位置。可能的选择：'horizontal','top','middle','bottom'。对齐方式决定标签在边缘上的对齐方式。默认值为horizontal和标签保持水平，不管边缘的方位如何。
font.vadjust	String	0	针对垂直位置进行调整。（正是下降）。
font.multi	Boolean or String	false	如果为false，则将标签视为用基本字体绘制的纯文本。如果TRUE或“HTML”，标签可以是多字体的，带有粗体、斜体和代码标记，解释为HTML。如果值是'markdown'或者'md'标签可以是多字体的，带有粗体、斜体和代码标记，被解释为markdown。粗体、斜体、粗体斜体和单字字体可以在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’	在标签文本中确定粗体字体时，添加到字体的字符串和大小。
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	‘bold’	在标签文本中确定斜体字体时，添加到字体的字符串和大小。
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’	在标签文本中确定粗体斜体字体时，添加到字体的字符串和大小。
font.boldital.vadjust	String	0	对标签文本中粗体斜体字体的垂直定位的字体特定校正。（正值下降）默认为基本字体的垂直对齐。
font.mono	Object or String	false	这个对象定义标签中等宽字字体的样式。形式上也支持'size face color'的形式，比如'14px arial red'。
font.mono.color	String	‘#343434’	标签文本中等宽字字体的颜色。默认为基本字体的颜色。
font.mono.size	Number	14	标签文本中等宽字字体的大小。默认为基本字体的大小。
font.mono.face	String	‘arial’	标签文本中等宽字字体的字体。默认为基本字体。
font.mono.mod	String	‘bold’	在标签文本中确定等宽字字体时，添加到字体的字符串和大小。
font.mono.vadjust	String	0	对标签文本中等宽字字体的垂直定位的字体特定校正。（正值下降）默认为基本字体的垂直对齐。
from	Number or String		边缘位于两个节点之间，一个到另一个。这是定义节点的位置。必须提供相应的节点ID。这自然只适用于个别边缘。
hidden	Boolean	false	当为true时，不绘制边缘。然而，它仍然是physics模拟的一部分。
hoverWidth	Number or Function	0.5	假定在interaction模块中启用悬停行为，hoverWidth决定当用户用鼠标悬停在其上时的边缘宽度。如果提供了一个数字，这个数字将被添加到宽度。因为宽度可以通过值和缩放函数来改变，所以常数乘法器或附加值可能不会给出最好的结果。为了解决这个问题，你可以提供一个函数。例子：var options: { edges: { hoverWidth: function (width) {return width+1;} }}它接收Number width。在这个简单示例中，我们向宽度添加1。只要函数返回一个Number，你就可以在函数中得到泰勒的逻辑。
id	String	undefined	边缘的ID。ID对于边沿是可选的。当未提供时，UUID将被分配给边缘。这自然只适用于个别边缘。
label	String	undefined	边缘的标签。HTML在这里不起作用，因为网络使用HTML5画布。
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	当FALSE时，标签不允许与边缘缩放。如果TRUE，它将使用默认的设置缩放。为了进一步定制，可以提供对象。
scaling.label.enabled	Boolean	false	打开或关闭标签的缩放。如果未定义此选项，则如果定义了该对象中的任何属性，则将其设置为true。
scaling.label.min	Number	14	在缩放时用于标签的最小字体大小。
scaling.label.max	Number	30	缩放时用于标签的最大字体大小。
scaling.label.maxVisible	Number	30	当放大时，字体也绘制得更大。您可以使用此选项限制所感知的字体大小。如果设置为30，字体将永远不会看起来大于30缩放100%。
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 = maxWidth - minWidth;myWidth = minWidth + diff * scale;请注意：maxWidth和minWidth是在选项中提供的scaling.max和scaling.min的值。
selectionWidth	Number or Function	1	selectionWidth决定边缘在选择边缘时的宽度。如果提供了一个数字，这个数字将被添加到宽度。因为宽度可以通过与尺度函数的值改变，一个常数乘法器或附加价值可能不会得到最好的结果。为了解决这个问题，你可以提供一个函数。例子：var options: { edges: { selectionWidth: function (width) {return width*2;} }}它接收边缘的Number width。在这个简单的示例中，将宽度乘以2。只要函数返回Number，你就可以在函数中得到泰勒的逻辑。
selfReferenceSize	Number	false	当来往节点相同时，画出一个圆。这就是那个圆的半径。
shadow	Object or Boolean	Object	当为true时，边缘使用默认设置投射阴影。这可以通过提供对象来进一步细化。
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轴偏移量。
smooth	Object or Boolean	Object	是否显示方向箭头。当为true时，边缘被绘制为动态二次Bezier曲线。这些曲线的绘制要比直线曲线长，但看起来更好。动态平滑曲线与静态平滑曲线存在差异。动态平滑曲线有一个不可见的支持节点参与物理模拟。如果你有很多边，你可能想考虑选择一种不同类型的平滑曲线，然后动态地获得更好的性能。
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画布一起使用。当为真时，选择水平，当FALSE时，使用较大的方向（节点之间的X距离与节点之间的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	如果指定了一个数字，则将边缘标签的最大宽度设置为该值。边缘的标签线将打破空间，以保持低于最大值。

相关链接

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