使用Axure制作可拖拽知识图谱/关系图谱-最InのAxure

前言

知识图谱是一种基于语义网络的知识表示方法，它通过将实体、属性以及它们之间的关系构建成一个图谱，来表达人类知识的本质。

知识图谱在许多领域有广泛的应用。今天我们以太阳系为例，演示一下如何在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都指向自己的父节点。
在父节点的“移动时”只要触发所有子节点的“移动时”就可以了。

如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。

原文链接：使用Axure制作可拖拽知识图谱/关系图谱

转载请注明：最InのAxure » 使用Axure制作可拖拽知识图谱/关系图谱

前言