vis.js的使用文檔總結

這個沒有中文api真的很是的很差弄,因此從網上學習總結一下:node


vis.js分爲模塊以下:git

模塊名 描述
configure 生成帶有篩選的交互式選項編輯器
edges 處理邊的建立和刪除,幷包含全局邊選項和樣式。
groups 包含組和一些有關如何處理具備不存在組的節點的選項。
interaction 用於全部用戶與網絡的交互。處理鼠標和觸摸事件和選擇,以及導航按鈕和彈出窗口。
layout 控制初始和層次定位。
manipulation 提供一個API和可選的GUI來更改網絡中的數據。
nodes 處理節點的建立和刪除,幷包含全局節點選項和樣式。
physics 是否全部的模擬都將節點和邊移動到它們的最終位置,並控制穩定性。

var options = {
  autoResize: true,
  height: '100%',
  width: '100%'
  locale: 'en',
  locales: locales,
  clickToUse: false,
  configure: {...},    // defined in the configure module.
  edges: {...},        // defined in the edges module.
  nodes: {...},        // defined in the nodes module.
  groups: {...},       // defined in the groups module.
  layout: {...},       // defined in the layout module.
  interaction: {...},  // defined in the interaction module.
  manipulation: {...}, // defined in the manipulation module.
  physics: {...},      // defined in the physics module.
}

network.setOptions(options);

模塊configure屬性:

參數名 類型 默認值 描述
enabled Boolean true 打開或關閉配置界面。這是一個可選參數。若是未定義該對象的任何其餘屬性,則將被設置爲true。
filter String, Array, Boolean, Function true 當是一個布爾值,爲true時將顯示全部選項,false將不顯示任何選項。若是提供了一個字符串,則可選項爲:nodes, edges, layout, interaction, manipulation, physics, selection, renderer。最後,當提供一個字數組時,那麼前面提到的字段可多選。當提供函數時,接收兩個參數。選項中的選項和路徑。若是它返回true,選項將顯示在配置器中。例如:function (option, path) {return path.indexOf(‘physics’) !==-1;}這隻顯示了physics選項。
container DOM element undefined 這容許您將配置列表放在網絡下面的另外一個HTML容器中。
showButton Boolean true 顯示配置程序底部的「生成選項」按鈕。

模塊layout屬性:

參數名 類型 默認值 描述
randomSeed Number undefined 配置每次生成的節點位置是否同樣,參數爲數字一、2等。當不使用分層佈局時,節點最初是隨機定位的。這意味着每次固定的位置是不一樣的。若是手動提供一個隨機種子,每次佈局都是相同的。理想狀況下,您嘗試使用未定義的種子,從新加載,直到您對佈局感到滿意,並使用getSeed()方法來肯定種子。
improvedLayout Boolean true 當啓用時,網絡將使用Kamada Kawai算法進行初始佈局。對於大於100個節點的網絡,將自動執行聚類以減小節點的數量。這能夠大大提升穩定時間。若是網絡是很是互聯的(沒有或不多的葉節點),這可能不起做用,它將恢復到舊的方法。性能將在將來獲得改善。
hierarchical Object or Boolean Object 層級結構顯示。當爲true時,佈局引擎使用默認設置以分層方式對節點進行定位。對於定製,您能夠提供對象。

關於hierarchical裏面object裏面的屬性填寫規範參考博客:https://blog.csdn.net/cuishiz...github



模塊group參數規範:

參數名 類型 默認值 描述
useDefaultGroups Boolean true 若是節點定義的組不在組模塊中,則模塊在它所擁有的組上循環,爲每一個未知組分配一個。當全部被使用時,它回到第一組。經過將此設置爲false,默認組將不在此循環中使用。
group* Object 能夠添加多個包含樣式信息的多個組,這些樣式信息適用於組的某個子集。在nodes模塊中描述的全部有意義的選項均可以在這裏使用(您不會爲一組節點設置相同的ID或x,y位置)。例子:var nodes = [ {id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}]var options = { groups: { myGroup: {color:{background:'red'}, borderWidth:3} }}該選項不被稱爲組,如示例所示,但能夠由任何自定義ID,除了「UndoDebug組」以外

模塊interaction屬性參數規範:

參數名 類型 默認值 描述
dragNodes Boolean true 當TRUE時,不固定的節點能夠被用戶拖動。
dragView Boolean true 當TRUE時,視圖能夠被用戶拖拽。
hideEdgesOnDrag Boolean false 當爲真時,拖動視圖時不繪製邊沿。這能夠大大加快拖動的響應性,提升用戶體驗。
hideNodesOnDrag Boolean false 若是爲true,則在拖動視圖時不繪製節點。這能夠大大加快拖動的響應性,提升用戶體驗。
hover Boolean false 當TRUE,the節點土地徘徊的顏色當老鼠移動了他們。
hoverConnectedEdges Boolean true 當TRUE,懸停在一個節點上,它的鏈接邊緣突出顯示
keyboard Object or Boolean Object 若是爲true,則使用默認設置啓用鍵盤快捷鍵。爲了進一步定製,能夠提供對象。
multiselect Boolean false 當爲真時,長時間單擊(或觸摸)以及控件單擊將添加到選擇。
navigationButtons Boolean false 若是爲真,則在網絡畫布上繪製導航按鈕。這些是HTML按鈕,可使用CSS徹底定製。
selectable Boolean true 當爲真時,節點和邊能夠由用戶選擇。
selectConnectedEdges Boolean true 當爲true時,在選擇節點時,其鏈接邊被高亮顯示。
tooltipDelay Number 300 當節點或邊具備定義的「title」字段時,這能夠顯示爲彈出工具提示。工具提示自己是一個HTML元素,可使用CSS徹底樣式化。延遲是在顯示工具提示以前花費的毫秒時間。
zoomView Boolean true 當爲真時,用戶能夠放大。
關於keyboard參數規範:

keyboard.png


模塊physics屬性規範:

參數名 類型 默認值 描述
enabled Boolean true 打開或關閉物理系統。此屬性是可選的。若是您定義了下面的任何選項,而且enabled未定義,則此選項將設置爲true。
barnesHut Object Object BarnesHut是一個基於四叉樹的重力模型。這是非分層佈局的最快、默認和推薦的解算器。
forceAtlas2Based Object Object Jacomi等人(2014)開發了Force Atlas 2,用於Gephi。基於forceatlas2的解算器使用了提供的一些方程並利用vis中的barnesHut實現。主要的區別是中心引力模型,它與距離無關,斥力是線性的而不是二次的。最後,全部節點質量都有基於鏈接邊數加1的乘數。
repulsion Object Object 排斥模型假設節點周圍有一個簡化的排斥場。它的力從1(0.5nodeDistance或更小)線性減小到0(2nodeDistance)
hierarchicalRepulsion Object Object 該模型基於斥力解算器,但考慮了水平和力的規範化。
maxVelocity Number 50 物理模塊限制節點的最大速度以增長穩定時間。這是最大值。
minVelocity Number 0.1 一旦達到全部節點的最小速度,咱們假設網絡已經穩定而且模擬中止。
solver String 'barnesHut' 您能夠選擇本身的解算器。可能的選項:「barnesHut」、「hierarchicalRepulsion」、「repulsion」、「forceatlas2base」。設置層次佈局時,層次排斥解算器將自動選中,而無論您在此處填寫什麼。
stabilization Object或Boolean Object 若是爲true,則使用默認設置在加載時穩定網絡。若是爲false,則禁用穩定。要進一步自定義此對象,能夠提供一個對象。
timestep Number 0.5 物理模擬是離散的。這意味着咱們在時間上邁出一步,計算力,移動節點,而後再邁出一步。若是您增長這個數字,步驟將太大,網絡可能變得不穩定。若是您看到網絡中有不少不穩定的移動,您可能須要稍微下降這個值。
adaptiveTimestep Boolean true 若是啓用此選項,則將智能地調整時間步長(僅在啓用穩定的穩定階段!)大大減小穩定時間。上面配置的時間步將做爲最小時間步。這能夠經過使用改進的佈局算法進一步改進。
wind Object Object 按給定方向推進全部非固定節點的力。要求全部節點都鏈接到「固定」節點,不然未鏈接的節點將無限期地繼續移動。

英文API文檔:https://visjs.github.io/vis-n...
visjs首頁:https://visjs.org/~~~~算法

相關文章
相關標籤/搜索