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

节点的配置项必须包含在名为“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配置项。
  
分类：




    
 前端
 
 
   
相关推荐
 
  
        繁华落尽ing
       
13小时前
 

        数据可视化
        Canvas
      
 
   经典可视化基础入门-底层原理篇
 
本文以canvas、svg原生为基础，结合fabricjs和antv框架讲解了2D图形原理。并深入分析了框架的构成原理，以及如何实现，并结合案例给出了多种实现方式。最后给出了整体架构图，方便参考。
 
 251
 





    
 
        小小张说故事
      
 
15小时前
 

        Python
        数据可视化
      
 
   Python数据可视化库：使用Bokeh创建交互式图表
 
一、Bokeh 简介 Bokeh 是一个流行的 Python 数据可视化库，可以生成高质量的交互式图表，无论是简单的线图、散点图，还是复杂的多维面图、网络图，Bokeh 都能轻松处理。同时，它支持网页
 
 133
 
 
        数据可视化
        Vue.js
      
 
   可视化大屏：autofit.js 一行搞定自适应
 
困扰着前端人自适应大屏适配的噩梦可能要被这短短的几行代码破解了，难道这就是大屏适配的最优解？快来看看这款名为autofit的小工具，用了都说好！
 
 5.5w
 
 
        疯狂学习GIS
        数据可视化
      
 
   三元图、三色空间图的绘制：基于R语言实现
 
本文介绍基于R语言中的Ternary包，绘制三元图（Ternary Plot）的详细方法；其中，我们就以RGB三色分布图为例来具体介绍~
 
 2593
 
 
        数据可视化
      
 
   Observable Plot系列 - 让我教教你做数据可视化
 
Observable Plot是什么？ Observable Plot是一个免费、开源的JavaScript库，用于可视化表格数据，专注于加速探索性数据分析。它具有简洁、易记、富有表达力的界面，采用了
 
 324
 
 
        德育处主任
        Canvas
        数据可视化
      
 
   OpenLayers.js 入门教程：打造互动地图的入门指南
 
👍 OpenLayers.js快速入门教程。从基础概念到实际应用，轻松掌握OpenLayers.js的核心技能。通过实例演示和解释，帮助你迅速上手OpenLayers.js
 
 766
 





    
 
        德育处主任
        Canvas
        数据可视化
      
 
   p5.js 到底怎么设置背景图？
 
🖼️ 本文主要讲解在p5.js中怎么设置背景图。背景图和普通的图片元素之间有哪些差异、使用背景图时有哪些注意点~
 
 636
 
 
        德育处主任
        Canvas
        数据可视化
      
 
   p5.js 开发点彩画派的绘画工具
 
🌅 本文介绍了如何使用p5.js开发点彩画派绘画工具。如果你对p5.js和点彩画派感兴趣，可以跟着本文动手试试～
 
 166
 
 
        three.js
        数据可视化
      
 
   写一个高德地图巡航功能的小DEMO
 
本文并无高深代码，简单结合了几个高德地图的案例，再结合之前写过的一些threejs效果，最终实现了一个简单的巡航demo，因为并无数据支持，所以略显简陋，见谅
 
 1511
 
 
        德育处主任
        数据可视化
        Canvas
      
 
   Fabric.js 使用自定义字体
 
🀄️ 如果你使用Fabric.js做编辑类的产品，有可能需要给用户配置字体。这次就讲讲在Fabric.js中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推一个精简字体库的工具
 
 559
 





    
 
        数据可视化
        JavaScript
      
 
   前端可视化大屏自适应工具，开箱即用
 
大屏适配解决方案 做可视化大屏时，在适配屏幕上，有四种常用的解决方案： 根据屏幕尺寸随意缩放 适用场景：留白不可接受的情况下使用 优点：占满屏幕，美观 缺点：屏幕尺寸比和设计稿尺寸比不一致时，导致变形
 
 1425
 
 
        alsmile
        数据可视化
      
 
   开源、易扩展、方便集成的Web绘图工具（流程图、架构图、组态、SCADA、大屏）
 
乐吾乐Meta2d.js是一个完全从零自主研发的国产开源Web绘图工具。能够方便快速的集成到自己的前端项目，实现专属自己的前端可视化平台
 
 989
 
 
        MarvinZhang
        数据可视化
      
 
   实战数据分析: 开源的自动化数据探索神器 Rath
 
本篇文章将介绍一个非常酷的自动化数据探索开源工具 Rath，可以自动化的完成 EDA，成为数据分析界的 Autopilot 或 Copilot
 
 3319
 
 
        德育处主任
        Canvas
        数据可视化
      
 
   物理世界的互动之旅：Matter.js入门指南
 
🦄 Matter.js是一个强大的JavaScript物理引擎，可帮助你创建逼真的动画和交互式效果。如果你正在寻找一种能够增强你网站用户体验的方式，那么Matter.js是一个很好的选择。
 
 7062
 
 
        冬日的暖阳balala
        数据可视化
      
 
   快速搞定可视化大屏
 
由于我最近一直开发大屏，所以累计了一些经验（yuanqi）,在此分享给大家，也方便后续自己复制粘贴... 内容主要是大屏一些可复用的模块，项目技术栈：vite + vue3 + echarts + v
 
 2038
 
 
          
 
 
  
 
 
友情链接：
 

        snap.js中文api
    爱魅Ame
        前端工程师