2. 程式人生 > >mxgraph進階(三)Web繪圖——mxGraph專案實戰(精華篇)

mxgraph進階(三)Web繪圖——mxGraph專案實戰(精華篇)

阿新 • • 發佈：2018-12-16

Web繪圖——mxGraph專案實戰(精華篇)

宣告

本文部分內容所屬論文現已發表，請慎重對待。

需求

      由於小論文實驗需求，需要實現根據使用者日誌提取出行為序列，然後根據行為序列生成有向圖的形式，並且連線相鄰動作的弧上標有執行此次相鄰動作的頻次，每個動作另附有一個數據集，這樣有向圖加資料集就構成了使用者互動圖。為此，自己想到了mxGraph，遂決定學習之。

起步

      此次專案實戰是受閱讀參考文獻[1]啟發，並在其圖形佈局例項基礎上進行。其原始介面如圖1所示，自己要實現的介面佈局與之頗有幾分神似。只是該佈局介面不支援節點與邊的定製，為此需要結合經典的“Hello world”例項,其原始介面佈局如圖2所示。

 

圖1 graphlayout例項

 

圖2 Hello World!例項

      由於自己是零基礎開始學習這一Web繪圖框架，首先是閱讀其原始碼。有關mxgraph的啟動載入原理及其元素瞭解，請閱讀《》、《》兩篇博文。

例項1原始碼閱讀

  1. <!Doctype html>
  2. <html xmlns=http://www.w3.org/1999/xhtml>
  3. <head>
  4. <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  5. <title>圖形佈局</title>
  6. <!-- 如果本檔案的包與src不是在同一個目錄,就要將basepath設定到src目錄下 -->
     
  7. <script type="text/javascript">
  8. mxBasePath = '../src';
  9. </script>
  10. <!-- 引入支援庫檔案 -->
  11. <script type="text/javascript" src="../src/js/mxClient.js"></script>
  12. <!-- 示例程式碼 -->
  13. <script type="text/javascript">
  14. // 程式在此啟動
  15. function main(container)
  16. {
  17. // 檢測瀏覽器相容性
  18. if (!mxClient.isBrowserSupported())
    19.  
  19. {
  20. mxUtils.error('Browser is not supported!', 200, false);
  21. }
  22. else
  23. {
  24. // 在容器中建立圖形
  25. var graph = new mxGraph(container);
  26. // 禁用選擇和單元格處理
  27. graph.setEnabled(false);
  28. // 更改點風格的樣式
  29. var style = graph.getStylesheet().getDefaultVertexStyle();
  30. style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
  31. style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
  32. style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
  33. style[mxConstants.STYLE_FONTSIZE] = '10';
  34. // 設定容器隨內容自適應
  35. //graph.setResizeContainer(true);
  36. // 設定圖大小
  37. graph.gridSize = 40;
  38. // 建立預設窗體
  39. var parent = graph.getDefaultParent();
  40. // 建立新的佈局演算法
  41. var layout = new mxFastOrganicLayout(graph);
  42. // 移動距離
  43. layout.forceConstant = 80;
  44. // 動畫效果選項
  45. var animate = document.getElementById('animate');
  46. // 新增按鈕來更新佈局
  47. document.body.insertBefore(mxUtils.button('圓形佈局Circle Layout',
  48. function(evt)
  49. {
  50. graph.getModel().beginUpdate();
  51. try
  52. {
  53. // 建立圓形佈局演算法
  54. var circleLayout = new mxCircleLayout(graph);
  55. circleLayout.execute(parent);
  56. }
  57. catch (e)
  58. {
  59. throw e;
  60. }
  61. finally
  62. {
  63. if (animate.checked)
  64. {
  65. var morph = new mxMorphing(graph);
  66. morph.addListener(mxEvent.DONE, function()
  67. {
  68. graph.getModel().endUpdate();
  69. });
  70. morph.startAnimation();
  71. }
  72. else
  73. {
  74. graph.getModel().endUpdate();
  75. }
  76. }
  77. }
  78. ), document.body.firstChild);
  79. //  新增按鈕來更新佈局
  80. document.body.insertBefore(mxUtils.button('隨機佈局Organic Layout',
  81. function(evt)
  82. {
  83. graph.getModel().beginUpdate();
  84. try
  85. {
  86. layout.execute(parent);
  87. }
  88. catch (e)
  89. {
  90. throw e;
  91. }
  92. finally
  93. {
  94. if (animate.checked)
  95. {
  96. //預設值是 6, 1.5, 20
  97. var morph = new mxMorphing(graph, 10, 1.7, 20);
  98. morph.addListener(mxEvent.DONE, function()
  99. {
  100. graph.getModel().endUpdate();
  101. });
  102. morph.startAnimation();
  103. }
  104. else
  105. {
  106. graph.getModel().endUpdate();
  107. }
  108. }
  109. }
  110. ), document.body.firstChild);
  111. // 開啟更新事務
  112. graph.getModel().beginUpdate();
  113. var w = 30;
  114. var h = 30;
  115. try
  116. {
  117. var v1 = graph.insertVertex(parent, null, 'A', 0, 0, w, h);
  118. var v2 = graph.insertVertex(parent, null, 'B', 0, 0, w, h);
  119. var v3 = graph.insertVertex(parent, null, 'C', 0, 0, w, h);
  120. var v4 = graph.insertVertex(parent, null, 'D', 0, 0, w, h);
  121. var v5 = graph.insertVertex(parent, null, 'E', 0, 0, w, h);
  122. var v6 = graph.insertVertex(parent, null, 'F', 0, 0, w, h);
  123. var v7 = graph.insertVertex(parent, null, 'G', 0, 0, w, h);
  124. var v8 = graph.insertVertex(parent, null, 'H', 0, 0, w, h);
  125. var e1 = graph.insertEdge(parent, null, 'ab', v1, v2);
  126. var e2 = graph.insertEdge(parent, null, 'ac', v1, v3);
  127. var e3 = graph.insertEdge(parent, null, 'cd', v3, v4);
  128. var e4 = graph.insertEdge(parent, null, 'be', v2, v5);
  129. var e5 = graph.insertEdge(parent, null, 'cf', v3, v6);
  130. var e6 = graph.insertEdge(parent, null, 'ag', v1, v7);
  131. var e7 = graph.insertEdge(parent, null, 'gh', v7, v8);
  132. var e8 = graph.insertEdge(parent, null, 'gc', v7, v3);
  133. var e9 = graph.insertEdge(parent, null, 'gd', v7, v4);
  134. var e10 = graph.insertEdge(parent, null, 'eh', v5, v8);
  135. // 執行更改
  136. layout.execute(parent);
  137. }
  138. finally
  139. {
  140. // 結束更新事務
  141. graph.getModel().endUpdate();
  142. }
  143. }
  144. };
  145. </script>
  146. </head>
  147. <!-- 頁面載入時啟動程式 -->
  148. <body onload="main(document.getElementById('graphContainer'))">
  149. <!-- 建立帶網格桌布和曲線的一個容器，請一定要定義的position和overflow的屬性！根據線上API的54 頁內容增加的大小偵聽器  -->
  150. <div id="graphContainer"
  151. style="position:relative;overflow:visible;width:821px;height:641px;background:url('editors/images/grid.gif');">
  152. </div>
  153. <br>
  154. <input type="checkbox" id="animate" checked="checked"/> Transitions
  155. </body>
  156. </html>

      從原始碼中可以看出，mxgraph首先是建立一個容器及其基本元素，然後在此容器基礎上完成圖形的繪製。

例項2原始碼閱讀

  1. <!Doctype html>
  2. <html xmlns=http://www.w3.org/1999/xhtml>
  3. <head>
  4. <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  5. <title>Hello, World! example for mxGraph</title>
  6. <!-- 如果不是在同一個目錄的庫,就設定根目錄'mxBasePath' -->
  7. <script type="text/javascript">
  8. mxBasePath = '../src';
  9. </script>
  10. <!-- 載入和初始化庫'mxClient.js' -->
  11. <script type="text/javascript" src="../src/js/mxClient.js"></script>
  12. <!-- 示例程式碼 -->
  13. <script type="text/javascript">
  14. //程式從這裡開始。建立了一個示例圖中的DOM節點與指定的ID。呼叫此函式時從onLoad事件處理程式的檔案（見下文）
  15. function main(container)
  16. {
  17. //檢查瀏覽器是否支援
  18. if (!mxClient.isBrowserSupported()) {
  19. //如果瀏覽器不支援，顯示錯誤資訊。
  20. mxUtils.error('Browser is not supported!', 200, false);
  21. } else {
  22. //能夠實現在SVG中清晰呈現矩形，即：去鋸齒效果
  23. mxRectangleShape.prototype.crisp = true;
  24. //在給定的容器中建立的圖形
  25. var graph = new mxGraph(container);
  26. //設定容器自動調整大小
  27. //graph.setResizeContainer(true);
  28. //允許彈性選項
  29. new mxRubberband(graph);
  30. // 在物件中建立預設元件
  31. var parent = graph.getDefaultParent();
  32. //在圖形中插入元件
  33. //開啟模型的事務
  34. graph.getModel().beginUpdate();
  35. try {
  36. //插入點
  37. var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
  38. var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
  39. //插入線
  40. var e1 = graph.insertEdge(parent, null, '', v1, v2);
  41. }
  42. finally {
  43. //事務結束
  44. graph.getModel().endUpdate();//"G:/mxgraph-1_10_4_2/mxgraph/javascript/examples/control.html"
  45. }
  46. }
  47. };
  48. </script>
  49. </head>
  50. <!-- 頁面載入時啟動程式 -->
  51. <body onload="main(document.getElementById('graphContainer'))">
  52. <!-- 建立帶網格桌布和曲線的一個容器 -->
  53. <div id="graphContainer" 
  54. style="position:relative;overflow:hidden;width:321px;height:241px;background:url('../examples/editors/images/grid.gif');cursor:default;">
  55. </div>
  56. </body>
  57. </html>

      將示例2的程式碼與示例1的程式碼進行對比，並沒有發現示例二中元素可以編輯的原因。可能的原因在於以下樣式設定:

  1. // 更改點風格的樣式
  2. var style = graph.getStylesheet().getDefaultVertexStyle();
  3. style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
  4. style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
  5. style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
  6. style[mxConstants.STYLE_FONTSIZE] = '10';

      經過思考，發覺其實圖中元素沒必要可編輯，只要顯示即可。

      有關原始碼中類及其方法的具體內容，請參看“附”小結中的API文件。

轉變思想

      在由日誌生成有向圖的過程中，自己可以生成頂點，邊及邊上的權值的獲取還存在一定的難度，尤其是權值的獲取，自己需要在原有權值的基礎上實現增加操作，步驟過於繁瑣。為此，考慮轉變一下解決問題的解決思路。

      可以考慮使用關聯矩陣的方法。對於獲取到的使用者序列，得到其關聯矩陣。

舉例

表1 使用者行為序列表

編號

行為序列

1

<a，b，c，d，e>

2

<a，c，e，f，g>

3

<b，e，f，a，g>

4

<b，c，a，d，f，g>

5

<a，b，e，f，e，f，g>

      某使用者行為序列如表1所示，其關聯矩陣如表2所示。其中以左側列資料為有向邊的起始點，以頂層行資料為有向邊的終止點。兩點交叉處的數值若非0，則說明兩點之間存在一條有向邊，數值表示邊上的權值，即使用者行為序列中此路徑出現的次數。

表2 使用者行為序列關聯矩陣

a

b

c

d

e

f

g

a

A[0][0]

1+1A[0][1]

1A[0][2]

1A[0][3]

A[0][4]

A[0][5]

1A[0][6]

b

A[1][0]

A[1][1]

1+1A[1][2]

A[1][3]

1+1A[1][4]

A[1][5]

A[1][6]

c

1A[2][0]

A[2][1]

A[2][2]

1A[2][3]

1A[2][4]

A[2][5]

A[2][6]

d

A[3][0]

A[3][1]

A[3][2]

A[3][3]

1A[3][4]

1A[3][5]

A[3][6]

e

A[4][0]

A[4][1]

A[4][2]

A[4][3]

A[4][4]

1+1+1+1A[4][5]

A[4][6]

f

1A[5][0]

A[5][1]

A[5][2]

A[5][3]

1A[5][4]

A[5][5]

1+1+1A[5][6]

g

A[6][0]

A[6][1]

A[6][2]

A[6][3]

A[6][4]

A[6][5]

A[6][6]

      由表2可知:

      1）矩陣主對角線上的元素全部為空，說明有向圖中不存在自環。

      2）該關聯矩陣中非空元素較少，空元素居多，說明有向圖中頂點之間的關係複雜度不會太大。

      3）根據有向邊上權值的大小，可觀察出使用者習慣性的行為序列。

      4）注意到該關聯矩陣由使用者日誌中僅僅5條行為序列所得，將此種情形擴充套件到使用者行為序列數量達到一定值時，應考慮所對應關聯矩陣特點。由於在一個系統中，使用者可執      行動作種類數量是一定的，而且在一段時間內同一使用者的行為往往表現出一定的規律性，故可得出一段時間內單使用者的行為序列所對應的關聯矩陣為稀疏矩陣的結論。

為了方便繪製互動圖，我們將使用者行為序列編號改變一下對映形式，將a對應於0，b對應於1，相應的g對應於6。則表1所對應的使用者行為序列表等價於表3。

表3 使用者行為序列表

編號

行為序列

1

<0，1，2，3，4>

2

<0，2，4，5，6>

3

<1，4，5，9，6>

4

<1，2，0，3，5，6>

5

<0，1，4，5，4，5，6>

      按照使用者行為序列相關的關聯矩陣儲存(二維陣列儲存頂點)——>遍歷行為序列方式插入有向邊及計算有向邊權值的思路，可得到圖3所示的互動圖。

 

圖3 使用者行為序列互動圖

對照圖1與表3，可驗證該互動圖的正確性。該互動圖可以完整的表述表3中所列使用者行為。但是，我們應該注意到，圖1還可以表達表3中所不包含的互動行為。例如圖1中所包含的行為序列<0,2,3,4,5,6>在表3中並不存在。即表3中的行為序列集合包含於圖1所標識的行為序列中。

互動圖優化

仔細觀察可以發現對於圖3中的雙向邊，例如(v4,v5)和(v5,v4)、(v2,v0)和(v0,v2),對於雙向邊的權值相同的情況，圖3顯示正常，但是當權值不同的時候，就會出現覆蓋的現象。例如W(v4,v5)=4，W(v5,v4)=1，從圖1可以看到有向邊顯示的權值為4，權值1被覆蓋掉。為此，需要進行圖1的優化操作。

從技術角度考慮，需要結合mxGraph的特點。官網例項中存在圖4所示的效果圖。可以考慮將有向邊進行拆分，分拆為兩條單向邊的形式。

 

圖4 mxGraph例項效果圖

      再次閱讀程式碼，將以下語句中的引數改為true之後，發現圖形元素就可拖拽、編輯了。

  1. // 允許選擇和單元格處理
  2. graph.setEnabled(true);

      官方API解釋如下:

 

優化後的使用者互動圖如圖3所示。對於雙向邊的處理方法為分拆為兩條有向邊。

 

演算法缺陷:

      1)時間、空間複雜度較大。存在多處迴圈巢狀導致程式執行時時間、空間複雜度較大。

      2)此方法目前只是作為一個原型，輸入引數均為常量，而非由使用者日誌中提取得到。有關日誌的處理工作前期已經完成。需要做的工作就是將不同的功能模組組裝起來。

      對於矩陣的儲存，詳情請參見《稀疏矩陣》、《》博文。

      有關論文，後期貼出。

附

注

      現在很多網站都會在網站的頂部顯示一行公告，從正常的html原始碼上來說，這一行公告內容必定是在頁面所有元素的最前面的，也就是body元素後面的第一個元素。

      首先解釋下為什麼不直接將程式碼寫在body塊內且設定為第一個元素，因為從seo的角度來講，網站頂部顯示的一行公告基本與網站的內容沒有多大關係。而作為網站html原始碼中比較靠前的內容，是搜尋引擎比較看重的內容。因此一段無關網站內容的內容最好不要放在html原始碼的前面。

      下面說正題，下面這段程式碼就是通過js動態建立一個div並且將該div放在頁面的最前面。

  1. var divObj=document.createElement("div"); 
  2. //divObj.setAttribute('id','topAlert'); 
  3. divObj.innerHTML='警告：轉載www.daimajiayuan.com網站文章不帶原文連結者，本站有權追究其法律責任！'; 
  4. var first=document.body.firstChild;//得到頁面的第一個元素 
  5. document.body.insertBefore(divObj,first);//在得到的第一個元素之前插入

致謝

      mxGraph專案是在chwshuang寫的一篇部落格中受到的啟發，參考文獻[1]便是此博主的博文，再次表示感謝。

參考文獻

美文美圖

 

相關推薦

mxgraph進階 三 Web繪圖——mxGraph專案實戰 精華篇

Web繪圖——mxGraph專案實戰(精華篇) 宣告     本文部分內容所屬論文現已發表，請慎重對待。 需求       由於小論文實驗需求，需要實現根據使用者日誌提取出行為序列，然後根據行為序列生成有向圖的形式，並且連線相鄰動作的弧上

mxgraph進階(三)Web繪圖——mxGraph專案實戰(精華篇)

Web繪圖——mxGraph專案實戰(精華篇)宣告本文部分內容所屬論文現已發表，請慎重對待。需求      由於小論文實驗需求，需要實現根據使用者日誌提取出行為序列，然後根據行為序列生成有向圖的形式，並且連線相鄰動作的弧上標有執行此次相鄰動作的頻次，每個動作另附有一個數據集，

mxgraph進階 三 Web繪圖——mxGraph項目實戰 精華篇

onload 初始化 iteye rap 編號 mark 復雜 setattr iss Web繪圖——mxGraph項目實戰(精華篇) 聲明 本文部分內容所屬論文現已發表，請慎重對待。 需求 由於小論文實驗需求，需要實現根據用戶日誌提取出行為序列，然後

AngularJS進階(三十九)基於專案實戰解析ng啟動載入過程

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

AngularJS進階 三十九 基於專案實戰解析ng啟動載入過程

基於專案實戰解析ng啟動載入過程 前言       在AngularJS專案開發過程中，自己將遇到的問題進行了整理。回過頭來總結一下angular的啟動過程。       下面以實際專案為例進行簡要講解。 1.載入ng庫 &

HTML5進階 三 HBuilder實現軟體自動升級 優化篇

HBuilder實現軟體自動升級(優化篇) 前言 受前篇部落格《HTML5進階(二)HBuilder實現軟體自動升級》(點選檢視詳情)的影響，測試過程中發現APP自動更新還是存在問題，第一次升級沒有任何問題。第二次升級時，若wrt升級包的名字相同，則會出現以下錯誤提示:   &

HTML5進階(三)HBuilder實現軟體自動升級(優化篇)

HBuilder實現軟體自動升級(優化篇) 前言 受前篇部落格《的影響，測試過程中發現APP自動更新還是存在問題，第一次升級沒有任何問題。第二次升級時，若wrt升級包的名字相同，則會出現以下錯誤提示:         估計是HBuilder的BUG導致出現以上錯誤。受社群中

Web Service進階 三 HTTP-GET HTTP-POST and SOAP的比較

XML Web Service 支援三種協議來與使用者交流資料。這三種協議分別是： 1．SOAP：Simple Object Access Protocol 2．HTTP-GET 3．HTTP-POST 1．首先我們先來理解一下這三者的大概定義。

mxGraph進階 一 mxGraph教程-開發入門指南

                mxGraph教程-開發入門指南 概述       mxGr

一、web專案開發進階之分模組管理專案之通用模組

  以前的web專案都是統一一個工程，其他人員在這個專案拉取分支進行開發，但是若需要多個人協作同時進行開發時，會造成各種各樣的問題。為了解決這些問題，按照業務邏輯進行區分，將一個專案按照多個模組進行構建。 （一）所有專案的父模組“parent”   父模組的

服務端技術進階(一)web專案的部署（釋出）流程

web專案的部署（釋出）流程          在myeclipse下新建web工程abc。系統設定預設如下：   專案儲存位置：workspace目錄\abc。Source資料夾：src，儲存所有的j

AngularJS進階(三十一)AngularJS項目開發技巧之獲取模態對話框中的組件ID

ng- 美圖 控件 div one 思考 span ava layui AngularJS項目開發技巧之獲取模態對話框中的組件ID 需求 出於項目開發需求，須要實現的業務邏輯是:藥店端點擊查看“已發貨”“已收貨”訂單詳情時。模塊彈出框中僅僅應出現“取消”bu

Spring Boot 進階之Web進階 學習 - 單元測試

自動生成 添加 學習 one 類文件 dma AC mock ring 可在類文件中,右鍵->GO TO->Test 自動生成測試文件 1.添加測試註解 簡單方法測試 @RunWith(SpringRunner.class)@SpringBootTes

Java進階(三)Java安全通訊：HTTPS與SSL

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

AngularJS進階(三十五)瀏覽器相容性解決之道

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

AngularJS進階(三十八)上拉載入問題解決方法

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Pod控制器應用進階三

spec： spec:     name     image     imagePullPolicy:Always,Never,IfNotPresent     ports

java面試（進階三篇）解答

題目來自於網路，答案是筆者整理的。僅供參考，歡迎指正 來源： https://mp.weixin.qq.com/s?__biz=MzI1NDQ3MjQxNA==&mid=2247485723&idx=1&sn=f5c3bfbfab9fe01e6d4979e4

SpringBoot進階之web進階3~統一異常處理

規定返回結果Result類     我們為了解決邏輯在一個地方處理，另一個地方不需要再接收它返回的資訊，所以我們引入了異常。預設的Exception只接受message的欄位，但我們通常還有code， 所以自定義一個Exception如下：

SpringBoot進階之web進階2~使用AOP處理請求（日誌）

作為Spring兩大核心原理AOP和IOC，什麼是AOP？     eg：下雨了我打開了傘，java和c程式設計師程式設計的區別   AOP利用的是橫切的技術，將面向物件構建的龐大的類的體系進行水平的切割，並且會將影響到多個類的公共行為封