如何在Memgraph的GSS中仅在边高亮或点击时显示其标签？

问题描述 #

我正在使用Memgraph示例中的社交关系图，图里包含人物节点和代表关系的边，每条边的标签是关系类型（比如示例里的IS_FRIENDS_WITH）。但节点和边数量多的时候，这些标签可读性特别差。我想实现仅在边被高亮或点击时才显示标签，试了下面的GSS代码片段，但Memgraph好像没有IsHovered或IsSelected这类函数，请问该怎么实现这种条件标签渲染？

@EdgeStyle Or(IsHovered(edge), IsSelected(edge)) {
  label: Type(edge)
}

解决方案 #

Memgraph的GSS语法目前确实没有IsHovered或IsSelected这类命名的函数，但可以通过内置的Hover和Selected状态变量实现需求，具体步骤如下：

• 默认隐藏所有边标签
  先给所有边设置默认样式，将标签设为空字符串，保证初始状态下标签不显示：

  @EdgeStyle {
    label: "";
  }
  

• 针对选中状态显示标签
  当边被点击选中时，Selected(edge)会返回true，针对该状态单独配置标签显示规则：

  @EdgeStyle Selected(edge) {
    label: Type(edge);
  }
  

• 针对hover高亮状态显示标签
  当鼠标悬停在边上时，Hover(edge)会返回true，添加对应的样式规则：

  @EdgeStyle Hover(edge) {
    label: Type(edge);
  }
  

• 合并状态规则（可选）
  如果想把hover和选中的规则合并，直接用Or逻辑运算符组合即可：

  @EdgeStyle Or(Hover(edge), Selected(edge)) {
    label: Type(edge);
  }
  

完整的GSS代码示例：

// 默认隐藏边标签
@EdgeStyle {
  label: "";
}

// 当边被hover或选中时显示标签
@EdgeStyle Or(Hover(edge), Selected(edge)) {
  label: Type(edge);
}

注意：请确保使用的Memgraph Lab版本在2.0及以上，该版本开始支持Hover和Selected状态变量特性。

内容的提问来源于stack exchange，提问作者cyau