Вопрос или проблема
Наконец, мне удалось создать потоковую линию, которая выглядит так, как я ожидал; однако я не могу понять, как добавить соединительные линии/узлы, которые связывали бы линии в соответствии с заданной логикой.
Логика заключается в том, что дата начала процесса на заданном этаже должна быть связана с началом того же процесса на следующем этаже. Я уже создал подмножество данных под названием “data_combined_nodes” в коде Vega, но просто не могу заставить это работать.
Логика подмножества “data_combined_nodes” следующая: я объединил два источника данных. Первый источник – это оригинальный набор данных, отфильтрованный так, чтобы включать только “Attribute”, где “Start” истинно. Второй источник – это тот же набор данных, но с такими же условиями фильтрации, за исключением того, что к значению этажа добавляется 0.5. Эта корректировка сделана, чтобы предотвратить наложение соединительных линий на оригинальные потоковые линии.
Это мой желаемый результат:
Может, кто-нибудь сможет помочь, пожалуйста?
Спасибо.
Ответ или решение
Чтобы добавить соединительные линии и узлы к вашему графику потока с использованием Vega или Vega-Lite, вам необходимо правильно настроить данные и визуализацию. Я постараюсь объяснить, как это сделать шаг за шагом.
Шаг 1: Подготовка данных
Как вы уже упомянули, вы создали набор данных data_combined_nodes, который содержит информацию о точках начала процессов на каждом этаже. Важно подготовить этот набор данных таким образом, чтобы он содержал:
- Координаты начальной точки для каждого процесса на текущем этаже.
- Координаты конечной точки для того же процесса на следующем этаже.
- Идентификатор процесса, который связывает эти точки.
Примерно ваш набор данных может выглядеть так:
[
{"process": "Процесс 1", "floor": 0, "x": 10, "y": 20, "next_floor": 1},
{"process": "Процесс 1", "floor": 1, "x": 10, "y": 50},
...
]Шаг 2: Настройка соединительных линий
Для добавления соединительных линий между узлами в Vega или Vega-Lite вам нужно определить новый слой для отображения этих линий. В примере ниже показано, как это сделать:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": [
{
"name": "data_combined_nodes",
"values": [ /* ваши данные здесь */ ]
}
],
"marks": [
{
"type": "line",
"from": {
"data": "data_combined_nodes"
},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "floor"},
"x2": {"scale": "xscale", "field": "x"},
"y2": {"scale": "yscale", "field": "next_floor"},
"stroke": {"value": "gray"},
"strokeWidth": {"value": 1}
}
}
}
]
}Шаг 3: Настройка узлов
Если вы хотите отобразить узлы на точках начала процессов, вы можете добавить ещё один слой для этих узлов:
{
"type": "symbol",
"from": {
"data": "data_combined_nodes"
},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "floor"},
"size": {"value": 100},
"fill": {"value": "blue"}
}
}
}Шаг 4: Координация слоев
Важно, чтобы данные были правильно связаны между слоями. Убедитесь, что используемые вами данные для соединительных линий и узлов корректно фильтруются и связаны через общие полевые значения, такие как идентификаторы процессов.
Шаг 5: Тестирование и отладки
После настройки всех данных и визуализации завершите работу, протестировав вашу реализацию. Убедитесь, что линии соединяют правильные узлы и что они не перекрываются с графиками потоков.
Заключение
Следуя этим шагам, вы сможете добавить соединительные линии и узлы в ваш график потока. Если вы столкнетесь с трудностями, проверьте, все ли данные правильно подготовлены и корректно ли выполнены связи между разными слоями. Удачи в вашем проекте! Если у вас остались вопросы, не стесняйтесь задавать их.