关系图谱

Posted on

关系图谱显示了你笔记之间的[[内部链接]]。

笔记被链接得越多，图谱上对应的节点就越大。

Pasted image 10.png

一些查看技巧

  • 鼠标悬停在某个节点上时能够高亮该节点及其相关的链接。这能让你快速看清与该笔记相关的东西。
  • 你可以通过拖动节点来调整图谱。这能让你更好地看清笔记间的连接。
  • 你可以通过鼠标滚轮或 + 、- 键来放大缩小图谱。
  • 你可以通过鼠标拖动图谱背景的方式，或是使用方向键来移动图谱。
  • 使用方向键时，按住 Shift 能让操作更快。

自定义外观

由于关系图谱是使用 <canvas> 和 WebGL 渲染的，因此自定义 CSS 无法改变图谱中节点和连线的外观。为了让你能自定义图谱外观，我们提供了一种将 CSS 转换为 WebGL 命令的方法。

调整图谱外观请使用以下 CSS 类：

1
2
3
4
5
6
7
8
9
10
11
.graph-view.color-fill
.graph-view.color-fill-focus (使用透明以关闭)
.graph-view.color-fill-tag (theme-dependent)
.graph-view.color-fill-attachment (theme-dependent)
.graph-view.color-arrow
.graph-view.color-circle
.graph-view.color-line
.graph-view.color-text
.graph-view.color-fill-highlight
.graph-view.color-line-highlight
.graph-view.color-fill-unresolved

需要注意，有些类是独立于基础颜色模式的。这意味着你需要在其前面添加 .theme-dark 或 .theme-light，使其能够在不同颜色模式下使用。

支持的 CSS 语法：

1
2
3
4
5
6
7
8
9
 .graph-view.color-class {
	/* 支持所有 css 颜色指令，如 #HEX, rgb and rgba */
	color:   #FFF;
	color:   #FFFFFF;
	color:   rgb(0, 0, 0);
	color:   rgba(0, 0, 0, 1);
	/* 透明度（类似于RGBA）将使颜色透明 */
	opacity: 0.5;
}

修改：

这些是 Obsidian 支持的默认语法。你可以使用相同的或更特殊的语法替换它们。特别是 .color-fill-tag 和 .color-fill-attachment。作为最后的选择，请在你代码的末尾加上 !important。

1
2
3
4
5
6
7
8
9
10
11
12
.graph-view.color-fill,
.theme-dark .graph-view.color-fill-tag,
.theme-light .graph-view.color-fill-tag,
.theme-dark .graph-view.color-fill-attachment,
.theme-light .graph-view.color-fill-attachment,
.graph-view.color-arrow,
.graph-view.color-circle,
.graph-view.color-line,
.graph-view.color-text,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight,
.graph-view.color-fill-unresolved {}