Line 118: |
Line 118: |
| | | |
| </graph> | | </graph> |
| + | |
| + | |
| + | |
| + | |
| + | |
| + | |
| + | |
| + | |
| + | |
| + | <graph> |
| + | |
| + | { |
| + | "version": 2, |
| + | "width": 550, |
| + | "height": 400, |
| + | "data": [ |
| + | { |
| + | "name": "tree", |
| + | "format": { "type": "treejson" }, |
| + | "transform": [ |
| + | { |
| + | "type": "hierarchy", |
| + | "field": "size", |
| + | "size": [400, 500] |
| + | } |
| + | ], |
| + | "values": |
| + | { "name": "Maker Hub Introduction FoxTALE Quiz", "size": 9800, |
| + | "children": [ |
| + | { "name": "child0" }, |
| + | { |
| + | "name": "child1", |
| + | "children": [ |
| + | { "name": "grandchild0" }, |
| + | { "name": "grandchild1" } |
| + | ] |
| + | } |
| + | ] |
| + | } |
| + | } |
| + | ], |
| + | "marks": [ |
| + | { |
| + | "type": "path", |
| + | "from": { |
| + | "data": "tree", |
| + | "transform": [ |
| + | { |
| + | "type": "filter", "test": "datum.parent" |
| + | }, |
| + | { |
| + | "type": "linkpath", |
| + | "sourceX": "parent.layout_y", |
| + | "sourceY": "parent.layout_x", |
| + | "targetX": "layout_y", |
| + | "targetY": "layout_x", |
| + | "shape": "diagonalX" |
| + | } |
| + | ] |
| + | }, |
| + | "properties": { |
| + | "enter": { |
| + | "path": {"field": "layout_path"}, |
| + | "stroke": {"value": "#ddd"} |
| + | } |
| + | } |
| + | }, |
| + | { |
| + | "type": "text", |
| + | "from": {"data": "tree"}, |
| + | "properties": { |
| + | "enter": { |
| + | "x": {"field": "layout_y", "offset": -10}, |
| + | "y": {"field": "layout_x"}, |
| + | "font": {"value": "Helvetica Neue"}, |
| + | "fontSize": {"value": 10}, |
| + | "align": {"value": "left"}, |
| + | "baseline": {"value": "middle"}, |
| + | "fill": {"value": "#000"}, |
| + | "text": {"field": "name"} |
| + | } |
| + | } |
| + | } |
| + | ] |
| + | } |
| + | |
| + | </graph> |
| + | |
| | | |
| | | |