mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 10:08:52 +08:00
minor changes
This commit is contained in:
47
Graph.md
47
Graph.md
@@ -18,7 +18,7 @@ To build a graph, a result set must follow the following requirements:
|
||||
That is what is the minimum required for a graph, but the JSON documents can have more fields used
|
||||
in graph styling (read [Graph styling](#graph-styling)).
|
||||
|
||||
See also an example in [How to get result set suitable for graph visualisation][1].
|
||||
See also an example in [How to get a result set suitable for graph visualisation][1].
|
||||
|
||||
## Graph structure
|
||||
|
||||
@@ -49,9 +49,9 @@ There are the following settings in `Style` > `Nodes` panel:
|
||||
- Label Color - a color of node labels
|
||||
- Size - set a node size. There are 3 modes of node sizing: constant, variable and calculated.
|
||||
|
||||
* `Constant` means that all nodes have the same given size.
|
||||
* `Variable` allows you to choose a field where the node size is taken from.
|
||||
* `Calculated` allows you to choose a method that is used to calculate the node size.
|
||||
- `Constant` means that all nodes have the same given size.
|
||||
- `Variable` allows you to choose a field where the node size is taken from.
|
||||
- `Calculated` allows you to choose a method that is used to calculate the node size.
|
||||
|
||||
Currently, 3 methods are available: total node degree, degree by in-edges and
|
||||
degree by out-edges.
|
||||
@@ -62,13 +62,13 @@ There are the following settings in `Style` > `Nodes` panel:
|
||||
|
||||
- Color - set a node color. There are 3 modes of node color: constant, variable and calculated.
|
||||
|
||||
* `Constant` means that all nodes have the same color.
|
||||
* `Variable` allows you to choose a field by which the color is determined.
|
||||
- `Constant` means that all nodes have the same color.
|
||||
- `Variable` allows you to choose a field by which the color is determined.
|
||||
With this option you can also choose if the color value should be taken directly or mapped to a
|
||||
color palette.
|
||||
* `Direct` mode means that in the JSON document representing the node, the value in the selected
|
||||
field is used as a color. The color value in the JSON document can be set in [different
|
||||
ways][2]:
|
||||
- `Direct` mode means that in the JSON document representing the node, the value in the selected
|
||||
field is used as a color. The color value in the JSON document can be set in different
|
||||
ways:
|
||||
|
||||
1. As Hex, 8-digit (RGBA) Hex:
|
||||
|
||||
@@ -86,36 +86,45 @@ There are the following settings in `Style` > `Nodes` panel:
|
||||
2. RGB, RGBA:
|
||||
|
||||
```
|
||||
rgb (255, 0, 0)
|
||||
// As a string:
|
||||
rgb(255, 0, 0)
|
||||
rgb 255 0 0
|
||||
rgba (255, 0, 0, .5)
|
||||
rgba(255, 0, 0, .5)
|
||||
|
||||
// As a nested structure:
|
||||
{ "r": 255, "g": 0, "b": 0 }
|
||||
```
|
||||
|
||||
3. HSL, HSLA:
|
||||
|
||||
```
|
||||
// As a string:
|
||||
hsl(0, 100%, 50%)
|
||||
hsla(0, 100%, 50%, .5)
|
||||
hsl(0, 100%, 50%)
|
||||
hsl 0 1.0 0.5
|
||||
|
||||
// As a nested structure:
|
||||
{ "h": 0, "s": 1, "l": .5 }
|
||||
```
|
||||
|
||||
4. HSV, HSVA:
|
||||
|
||||
```
|
||||
// As a string:
|
||||
hsv(0, 100%, 100%)
|
||||
hsva(0, 100%, 100%, .5)
|
||||
hsv (0 100% 100%)
|
||||
hsv(0 100% 100%)
|
||||
hsv 0 1 1
|
||||
|
||||
// As a nested structure:
|
||||
{ "h": 0, "s": 100, "v": 100 }
|
||||
```
|
||||
|
||||
5. Named colors:
|
||||
|
||||
Case insensitive names are accepted, using the list of [colors in the CSS
|
||||
spec][3].
|
||||
spec][2].
|
||||
|
||||
```
|
||||
RED
|
||||
@@ -154,8 +163,8 @@ There are the following settings in `Style` > `Edges` panel:
|
||||
- Label Color - a color of edge labels
|
||||
- Size - set an edge thickness. There are 2 modes of edge sizing: constant and variable.
|
||||
|
||||
* `Constant` means that all edges have the same thickness.
|
||||
* `Variable` allows you to choose a field where the edge size is taken from.
|
||||
- `Constant` means that all edges have the same thickness.
|
||||
- `Variable` allows you to choose a field where the edge size is taken from.
|
||||
|
||||
For variable sizing it's also possible to set the scale and the minimum size.
|
||||
|
||||
@@ -190,15 +199,13 @@ hierarchy attributes to group nodes.
|
||||
#### ForceAtlas2
|
||||
|
||||
A continuous graph layout algorithm. Read more details about the algorithm and its settings in the
|
||||
[article][4]. The algorithm works iteratively. When you choose ForceAtlas2 layout or run the query,
|
||||
[article][3]. The algorithm works iteratively. When you choose ForceAtlas2 layout or run the query,
|
||||
it is automatically run 50 iterations of the algorithm. You can change the amount of steps run
|
||||
automatically in `Initial Iterations`. You can also run and stop the algorithm manually by
|
||||
clicking `Start`/`Stop` button.
|
||||
|
||||

|
||||
|
||||
|
||||
[1]: ./How-to-get-result-set-suitable-for-graph-visualisation
|
||||
[2]: https://github.com/bgrins/TinyColor/blob/d5ad0c6/README.md#accepted-string-input
|
||||
[3]: https://www.w3.org/TR/css-color-4/#named-colors
|
||||
[4]: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679
|
||||
[2]: https://www.w3.org/TR/css-color-4/#named-colors
|
||||
[3]: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679
|
||||
|
||||
Reference in New Issue
Block a user