mxgraph學習（一）

寫在前面：

最近項目中有個模塊，是需要在頁面繪製體現數據從數據庫到表數據的變化歷史。其中有兩個概念：‘數據血源’，‘影響分析’。也就是模仿kettel的呈現效果，在項目頁面上直接呈現，不必打開kettel去一一查看數據的歷史。大概的背景是這樣。雛形：

---

在此基礎上我還需要實現：圖的可拖動，可放大縮小。以及點擊事件等。

因此各種找資源學習，以下是一些學習連接：

官方文檔：

https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html

官方demos:

https://jgraph.github.io/mxgraph/javascript/

瞭解mxgraph：

https://www.cnblogs.com/shawWey/category/1028607.html。

尤其是第二篇，寫了一些操作，很有用

https://www.cnblogs.com/shawWey/p/7116548.html

鼠標懸停;

https://www.iteye.com/blog/chwshuang-1797415

https://blog.csdn.net/weixin_37745913/article/details/103179403

特別的我參考了第二個方法，懸停文字也可以是由標籤包裹的文字，另外，提示框的原樣式可以被修改覆蓋，只需要重新定義樣式文件，拷貝原有的mxgraph中的common.css文件內容，修改新文件中的div .mxTooltip選擇器樣式即可。eg:

僞代碼：

div.mxTooltip {
  background: black!important;
  opacity: 0.7;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  border-color: black;
  font-size: 13px;
  position: absolute;
  cursor: default;
  padding:15px  10px;
  color: #fafafa;
}

 

以上。

感謝，所有原作者。