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;
}

 

以上。

感谢，所有原作者。