前言
知识图谱是一种基于语义网络的知识表示方法，它通过将实体、属性以及它们之间的关系构建成一个图谱，来表达人类知识的本质。
知识图谱在许多领域有广泛的应用。今天我们以太阳系为例，演示一下如何在Axure中创建一个可拖动的知识图谱。在拖动的同时保持相互关系，并且非常容易扩展。
演示地址
这是一个太阳系八大行星的知识图谱：
https://usrsky.axshare.com/#id=rxn54f&g=1
基础知识
需要用勾股定理来计算连线长度。
需要用反正切来计算连线旋转角度。
准备工作
新建一个全局变量theta，默认值0就可以。
根结点“太阳”：先拖出一个圆形，输入文字“太阳”，右键“转为动态面板”，动态面板取名Sun。最好一直置顶。
子节点“火星”：再拖出一个圆形，输入文字“火星”，右键“转为动态面板”，动态面板取名Mars。
火星“连线”：拖出一个矩形，取名Line，宽度随意，高度为2，默认置底。不建议使用“水平线/垂直线”，总是莫名其妙的出问题。
元件结构如下：
“火星”教程
火星是一个引人入胜的行星，喜欢科学的都会有浓厚的兴趣，我们就先操作一下。
先来做“火星”的交互：
其中用到的局部变量p都是指Sun元件（p代表parentNode，意思为父节点），注意不要选到“元件文本”：
简单讲解一下“旋转时”的交互内容（方便读者复制粘贴）：
- 旋转时
- 设置变量值
- 设置全局变量theta的值为 [[Math.atan2(this.y+this.height/2-p.y-p.height/2,this.x+this.width/2-p.x-p.width/2)]]
- 旋转
- 旋转Line到达 [[theta*(180/3.14159265359)]]
- 设置尺寸
- 设置Line的尺寸为 宽度：[[Math.sqrt(Math.pow((p.y+p.height/2-this.y-this.height/2),2)+Math.pow((p.x+p.width/2-this.x-this.width/2),2))]] 高度：2
- 移动
- 移动Line到达 x坐标：[[p.x+p.width/2-Target.width/2*(1-(Math.cos(theta)))]] y坐标：[[p.y+p.height/2+(Math.sin(theta)*Target.width/2)]]
太阳动态面板“Sun”的交互，相当简单，只需要在自身移动时触发一下“Mars”的“移动时”：
这样，一个太阳与火星的关系图就做好了。
此时可以预览一下看看效果。
“地球”教程
地球是我们所居住的第三颗距离太阳最近的行星。我们也把它加进来。
我们同时选择Mars和Line，重复一份，新的动态面板改名为Earth，文本改为“地球”，并将新的Line置底。
新的元件关系如下：
这时，只需要在动态面板“Sun”上，多触发一下“Earth”的“移动时”就可以了。是不是简单到离谱？
也可以用同样的方法把太阳系的其他行星都加入进来。
“月球”教程
月球是地球的唯一自然卫星，是我们夜空中最明亮的天体之一。
我们再次同时选择Mars和对应的Line，重复一份，新的动态面板改名为Moon，文本改为“月”，同样将新的Line置底。
新的元件关系如下：
月亮的父节点应该为Earth对吧，所以，我们需要把“Moon”的交互里用到的局部变量p全部都改为Earth元件。
最后，在“Earth”移动时，通知一下“Moon”进行计算。
总结
我们将所有的计算都放在子节点上，这样会非常容易扩充及维护。只需要做到两点：
- 把子节点的局部变量p都指向自己的父节点。
- 在父节点的“移动时”只要触发所有子节点的“移动时”就可以了。
如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。
转载请注明：最InのAxure » 使用Axure制作可拖拽知识图谱/关系图谱