run prettier
This commit is contained in:
		@@ -1,13 +1,13 @@
 | 
			
		||||
---
 | 
			
		||||
title: "Graph View"
 | 
			
		||||
tags:
 | 
			
		||||
- component
 | 
			
		||||
  - component
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
Quartz features a graph-view that can show both a local graph view and a global graph view. 
 | 
			
		||||
Quartz features a graph-view that can show both a local graph view and a global graph view.
 | 
			
		||||
 | 
			
		||||
- The local graph view shows files that either link to the current file or are linked from the current file. In other words, it shows all notes that are *at most* one hop away.
 | 
			
		||||
- The global graph view can be toggled by clicking the graph icon on the top-right of the local graph view. It shows *all* the notes in your graph and how they connect to each other.
 | 
			
		||||
- The local graph view shows files that either link to the current file or are linked from the current file. In other words, it shows all notes that are _at most_ one hop away.
 | 
			
		||||
- The global graph view can be toggled by clicking the graph icon on the top-right of the local graph view. It shows _all_ the notes in your graph and how they connect to each other.
 | 
			
		||||
 | 
			
		||||
By default, the node radius is proportional to the total number of incoming and outgoing internal links from that file.
 | 
			
		||||
 | 
			
		||||
@@ -17,6 +17,7 @@ Additionally, similar to how browsers highlight visited links a different colour
 | 
			
		||||
> Graph View requires the `ContentIndex` emitter plugin to be present in the [[configuration]].
 | 
			
		||||
 | 
			
		||||
## Customization
 | 
			
		||||
 | 
			
		||||
Most configuration can be done by passing in options to `Component.Graph()`.
 | 
			
		||||
 | 
			
		||||
For example, here's what the default configuration looks like:
 | 
			
		||||
@@ -26,13 +27,13 @@ Component.Graph({
 | 
			
		||||
  localGraph: {
 | 
			
		||||
    drag: true, // whether to allow panning the view around
 | 
			
		||||
    zoom: true, // whether to allow zooming in and out
 | 
			
		||||
    depth: 1,   // how many hops of notes to display
 | 
			
		||||
    depth: 1, // how many hops of notes to display
 | 
			
		||||
    scale: 1.1, // default view scale
 | 
			
		||||
    repelForce: 0.5,  // how much nodes should repel each other
 | 
			
		||||
    repelForce: 0.5, // how much nodes should repel each other
 | 
			
		||||
    centerForce: 0.3, // how much force to use when trying to center the nodes
 | 
			
		||||
    linkDistance: 30, // how long should the links be by default?
 | 
			
		||||
    fontSize: 0.6,    // what size should the node labels be?
 | 
			
		||||
    opacityScale: 1   // how quickly do we fade out the labels when zooming out?
 | 
			
		||||
    fontSize: 0.6, // what size should the node labels be?
 | 
			
		||||
    opacityScale: 1, // how quickly do we fade out the labels when zooming out?
 | 
			
		||||
  },
 | 
			
		||||
  globalGraph: {
 | 
			
		||||
    drag: true,
 | 
			
		||||
@@ -43,8 +44,8 @@ Component.Graph({
 | 
			
		||||
    centerForce: 0.3,
 | 
			
		||||
    linkDistance: 30,
 | 
			
		||||
    fontSize: 0.6,
 | 
			
		||||
    opacityScale: 1
 | 
			
		||||
  }
 | 
			
		||||
    opacityScale: 1,
 | 
			
		||||
  },
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@@ -55,4 +56,4 @@ Want to customize it even more?
 | 
			
		||||
- Removing graph view: delete all usages of `Component.Graph()` from `quartz.config.ts`.
 | 
			
		||||
- Component: `quartz/components/Graph.tsx`
 | 
			
		||||
- Style: `quartz/components/styles/graph.scss`
 | 
			
		||||
- Script: `quartz/components/scripts/graph.inline.ts`
 | 
			
		||||
- Script: `quartz/components/scripts/graph.inline.ts`
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user