Plr : Différence entre versions
| Ligne 1 : | Ligne 1 : | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{{#tag:graph| | {{#tag:graph| | ||
{ | { | ||
"$schema": "https://vega.github.io/schema/vega/v4.json", | "$schema": "https://vega.github.io/schema/vega/v4.json", | ||
| − | "width": | + | "width": 600, |
| − | "height": | + | "height": 1600, |
"padding": 5, | "padding": 5, | ||
"signals": [ | "signals": [ | ||
{ | { | ||
| − | "name": " | + | "name": "labels", "value": true, |
| − | "value": " | + | "bind": {"input": "checkbox"} |
| + | }, | ||
| + | { | ||
| + | "name": "layout", "value": "tidy", | ||
| + | "bind": {"input": "radio", "options": ["tidy", "cluster"]} | ||
| + | }, | ||
| + | { | ||
| + | "name": "links", "value": "diagonal", | ||
"bind": { | "bind": { | ||
"input": "select", | "input": "select", | ||
| − | "options": [ | + | "options": ["line", "curve", "diagonal", "orthogonal"] |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
} | } | ||
| Ligne 41 : | Ligne 26 : | ||
"data": [ | "data": [ | ||
{ | { | ||
| − | "name": " | + | "name": "tree", |
| − | " | + | "url": "data/flare.json", |
| − | + | "transform": [ | |
| − | {" | + | { |
| − | {" | + | "type": "stratify", |
| − | + | "key": "id", | |
| − | + | "parentKey": "parent" | |
| − | + | }, | |
| − | + | { | |
| − | {" | + | "type": "tree", |
| − | + | "method": {"signal": "layout"}, | |
| − | + | "size": [{"signal": "height"}, {"signal": "width - 100"}], | |
| + | "as": ["y", "x", "depth", "children"] | ||
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | { | ||
| + | "name": "links", | ||
| + | "source": "tree", | ||
| + | "transform": [ | ||
| + | { "type": "treelinks" }, | ||
| + | { | ||
| + | "type": "linkpath", | ||
| + | "orient": "horizontal", | ||
| + | "shape": {"signal": "links"} | ||
| + | } | ||
] | ] | ||
} | } | ||
| Ligne 58 : | Ligne 57 : | ||
"scales": [ | "scales": [ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{ | { | ||
"name": "color", | "name": "color", | ||
| − | "type": " | + | "type": "sequential", |
| − | "range": " | + | "range": {"scheme": "magma"}, |
| − | "domain": {"data": " | + | "domain": {"data": "tree", "field": "depth"}, |
| + | "zero": true | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
], | ], | ||
"marks": [ | "marks": [ | ||
{ | { | ||
| − | "type": " | + | "type": "path", |
| − | "from": { | + | "from": {"data": "links"}, |
| − | " | + | "encode": { |
| − | " | + | "update": { |
| − | "data": " | + | "path": {"field": "path"}, |
| − | " | + | "stroke": {"value": "#ccc"} |
| + | } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | "type": "symbol", | ||
| + | "from": {"data": "tree"}, | ||
| + | "encode": { | ||
| + | "enter": { | ||
| + | "size": {"value": 100}, | ||
| + | "stroke": {"value": "#fff"} | ||
| + | }, | ||
| + | "update": { | ||
| + | "x": {"field": "x"}, | ||
| + | "y": {"field": "y"}, | ||
| + | "fill": {"scale": "color", "field": "depth"} | ||
} | } | ||
| − | }, | + | } |
| − | + | }, | |
| − | + | { | |
| − | + | "type": "text", | |
| − | + | "from": {"data": "tree"}, | |
| − | + | "encode": { | |
| − | + | "enter": { | |
| − | + | "text": {"field": "name"}, | |
| − | + | "fontSize": {"value": 9}, | |
| − | + | "baseline": {"value": "middle"} | |
| − | + | }, | |
| − | + | "update": { | |
| − | + | "x": {"field": "x"}, | |
| − | + | "y": {"field": "y"}, | |
| − | + | "dx": {"signal": "datum.children ? -7 : 7"}, | |
| − | + | "align": {"signal": "datum.children ? 'right' : 'left'"}, | |
| − | + | "opacity": {"signal": "labels ? 1 : 0"} | |
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | } | |
} | } | ||
] | ] | ||