vis.js使用小节

var options = {
     nodes:{//节点配置
         borderWidth: 1,//节点边框的宽度,单位为px
         borderWidthSelected: 2,节点被选中时边框的宽度,单位为px
         color: {
              border: '#2B7CE9',//节点边框颜色
              background: '#97C2FC',//节点背景颜色
              highlight: {//节点选中时状态颜色
                border: '#2B7CE9',
                background: '#D2E5FF'
              },
              font: {//字体配置
                  color: '#343434',//颜色
                  size: 14, // 大小,单位px
                  face: 'arial',//字体
                  background: 'none',//背景
                  align: 'center',//位置left right center
              },
              hover: {//节点鼠标滑过时状态颜色
                border: '#2B7CE9',
                background: '#D2E5FF'
              }
            },
         shadow:true
     },
     interaction: {
         dragNodes:false,//是否能拖动节点
         dragView:false,//是否能拖动画布
         hideEdgesOnDrag:true,//拖动画布时是否隐藏连接线
         hideNodesOnDrag:true,//拖动画布时是否隐藏节点
         hover: true,//鼠标移过后加粗该节点和连接线
         keyboard:true,//
         multiselect:true,//按 ctrl 多选
         navigationButtons:true,//是否显示控制按钮
         selectable:false,//是否可以点击选择
         selectConnectedEdges:false,//选择节点后是否显示连接线
         hoverConnectedEdges:false,//鼠标滑动节点后是否显示连接线
         tooltipDelay:200,
         zoomView:true//是否能缩放画布
     },
     layout:{
         randomSeed:1,//配置每次生成的节点位置都一样,参数为数字1、2等
         hierarchical: {
             direction: 'UD',//UD:上下 DU:下上 LR:左右 RL:右左
             sortMethod: 'directed' 
         }, //层级结构显示}
     },
     edges: {
         shadow:true,//连接线阴影配置
         smooth: true,//是否显示方向箭头
         arrows: {from : true }//箭头指向from节点
     }
 };

你可能感兴趣的:(vis.js使用小节)