当前位置:首页 > draw.io教程

创建交互式图表并使用自定义链接切换图层

drawio5年前 (2021-01-06)draw.io教程8

将复杂的图表拆分成多个页面上的逻辑较小的图表,或者使用多个图层,可以大大提高图表的可读性和可理解性。

要了解有关复杂图表的更多信息,您可以使用图表查看器底部的工具栏切换图层显示并切换到另一个图表页面,或者使用图表编辑器中的图层对话框和页面选项卡。

或者,您可以通过向图表中的形状和文本添加自定义链接,使图表具有交互性,这些链接可以作为直观的切换开关——您不必使用工具栏即可与图表进行交互。

可以通过在图表本身中添加交互式图层来获益的图表包括网络或基础设施图平面图Gitflow 图

了解更多关于在 draw.io 中使用图层的信息

自定义链接是包含要使其具有交互性的图表元素的形状或图层 ID 的小型 JSON 代码片段。

您可以open设置网页 URL 或自定义链接、toggle元素开/关show图表元素、元素到图表中的特定元素,或者设置带有自定义链接的元素hidehighlightselectscrollviewbox

例如,自定义链接中的以下 JSON 操作会切换图层的显示状态——如果图层可见,则将其隐藏;如果图层隐藏,则将其显示。

data:action/json,{"actions":[{"toggle":{"cells":["YwLYfkWT0Qeqm7Gh2uLp-177"]}}]}

了解更多关于自定义链接的信息

一个交互式 Gitflow 图示例

在下面的示例中,toggle将在 gitflow 图表中添加交互式图层开关,以便您可以单击以下标签并显示或隐藏其分支。

  • 发布和发布修复

  • 功能团队 1 及其开发分支

  • 第二功能团队及其开发分支

Master、Nightly 和 Hotfix 分支以及 Development 标签始终显示,因此放置在背景层。

在我们的在线图表查看器中打开交互式 Gitflow 示例

设置形状以用作切换开关

当您点击用作切换按钮的形状,并且该形状位于您想要隐藏的图层或组中时,您将无法再次点击它。

  1. 复制你想用作切换按钮的形状,然后将它们粘贴到背景图层上。

  2. 将它们直接放置在其他图层上的原始形状下方,这样当您单击时,图表元素就不会移动位置。

复制图层 ID

  1. 选择“视图”>“图层”,或者如果看不到“图层”Ctrl+Shift+L对话框,请按/键Cmd+Shift+L显示该对话框。

  2. 选择一个图层,然后在“图层”对话框菜单(三条水平线)中,选择“当前图层”>“编辑数据”

  3. 复制图层ID——一长串数字和字母。

提示:如果要切换单个形状而不是图层,请按Ctrl+MCmd+M编辑形状的元数据,然后复制其ID(一个短数字)。

  1. 前往draw.io 实用工具页面

  2. 将图层 ID 粘贴到“单元格/图层”文本字段中。您可以在自定义链接中切换多个图层或形状——只需添加所有图层/形状 ID,并用空格分隔即可。

  3. 点击5. 添加操作,在下方较大的文本字段中生成自定义链接。

  4. 点击“复制链接”复制自定义链接

  1. 回到 draw.io 编辑器,右键单击图表中的形状,然后选择“编辑链接”,或者选择该形状并使用键盘快捷键Alt+Shift+L

  2. 在第一个文本字段中输入自定义链接,然后单击“应用”

  3. 请确保将相同的链接添加到背景图层上对应的形状,以便您可以再次切换图层的显示状态。

与图表互动

在编辑器中查看图表时,您可以通过三种方式与图表进行交互:

  • 在“图层”对话框中,单击复选框

  • 如果要切换的图层被锁定,请直接单击形状,就像在查看器中与图表交互一样。

  • 如果图层已解锁,Action选择形状时,自定义链接会显示在带有标签的工具提示中。点击此链接可显示或隐藏图层和形状。

将自定义链接粘贴到第一个文本框中,然后单击“应用”。

在我们的图表查看器中打开此交互式 Gitflow 流程图