Предположим, вы можете представить свою диаграмму следующим образом:
"values": [
{"id": "1", "parent": null, "title": "Animal"},
{"id": "2", "parent": "1", "title": "Duck"},
{"id": "3", "parent": "1", "title": "Fish"},
{"id": "4", "parent": "1", "title": "Zebra"}
]
Что вы можете сделать, это расположить узлы в форме дерева (stratify* 1006) * делает работу):
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": "tidy",
"separation": true,
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
выложив узлы, вам нужно сгенерировать соединительные линии, treelinks + linkpath комбинирует точно что:
{
"name": "links",
"source": "tree", // take datasource "tree" as input
"transform": [
{ "type": "treelinks" }, // apply transform 1
{ "type": "linkpath", // follow up with next transform
"shape": "diagonal"
}
]
}
теперь, когда у вас есть источники данных, вы хотите рисовать реальные объекты. в Веге они называются marks. Я предполагаю, что именно здесь я собираюсь отклониться от желаемого результата, поскольку я рисую только один прямоугольник с заголовком для каждой точки данных и некоторыми базовыми c линиями для подключения:
"marks": [
{
"type": "path",
"from": {"data": "links"}, // dataset we defined above
"encode": {
"enter": {
"path": {"field": "path"} // linkpath generated a dataset with "path" field in it - we just grab it here
}
}
},
{
"type": "rect",
"from": {"data": "tree"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "text",
"from": {"data": "tree"}, // use data set we defined earlier
"encode": {
"enter": {
"stroke": {"value": "black"},
"text": {"field": "title"}, // we can use data fields to display actual values
"x": {"field": "x"}, // use data fields to draw values from
"y": {"field": "y"},
"dx": {"value":50}, // offset the mark to appear in rectangle center
"dy": {"value":13},
"align": {"value": "center"}
}
}
}
]
Все в целом я достиг очень базового c приближения вашего целевого состояния. Это точно не точное совпадение: прямоугольники там, вероятно, следует заменить на groups, и пути соединения тоже потребуют некоторой работы. Вы заметите, что я не использую signals для подачи динамических c пользовательских вводов и update / exit / hover инструкций - опять же, для простоты.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 800,
"height": 300,
"padding": 5,
"data": [
{
"name": "tree",
"values": [
{"id": "1", "parent": null, "title": "Animal"},
{"id": "2", "parent": "1", "title": "Duck"},
{"id": "3", "parent": "1", "title": "Fish"},
{"id": "4", "parent": "1", "title": "Zebra"}
],
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": "tidy",
"separation": true,
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
},
{
"name": "links",
"source": "tree",
"transform": [
{ "type": "treelinks" },
{ "type": "linkpath",
"shape": "diagonal"
}
]
},
{
"name": "tree-boxes",
"source": "tree",
"transform": [
{
"type": "filter",
"expr": "datum.parent == null"
}
]
},
{
"name": "tree-circles",
"source": "tree",
"transform": [
{
"type": "filter",
"expr": "datum.parent != null"
}
]
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"enter": {
"path": {"field": "path"}
}
}
},
{
"type": "rect",
"from": {"data": "tree-boxes"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree-circles"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "rect",
"from": {"data": "tree"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "text",
"from": {"data": "tree"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"text": {"field": "title"},
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"value":50},
"dy": {"value":13},
"align": {"value": "center"}
}
}
}
]
}
UPD : предположим, вы хотите визуализировать различные фигуры для root и листовых узлов вашей диаграммы. Одним из способов достижения этого будет добавление двух преобразований filter на основе вашего набора данных tree и соответствующая их фильтрация:
{
"name": "tree-boxes",
"source": "tree", // grab the existing data
"transform": [
{
"type": "filter",
"expr": "datum.parent == null" // run it through a filter defined by expression
}
]
},
{
"name": "tree-circles",
"source": "tree",
"transform": [
{
"type": "filter",
"expr": "datum.parent != null"
}
]
}
, а затем вместо отображения всех отметок как rect вам нужны две разные формы для соответствующих преобразованных наборов данных:
{
"type": "rect",
"from": {"data": "tree-boxes"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree-circles"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
}