Я работаю над более глубоким пониманием взаимодействия на диаграммах Vega. В настоящее время я хотел бы изменить пример Вороного из документации, чтобы вы не добавляете и не удаляете точки, а перетаскиваете существующие точки. Мой код выглядит так:
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"autosize": "none",
"signals": [
{
"name": "movePoint",
"on": [
{
"events": "[mousedown, mouseup] > mousemove",
"update": "{u: round(100*invert('xscale', x()))/100, v: round(100*invert('yscale', y()))/100}"
}
]
}
],
"data": [
{
"name": "table",
"values": [
{"u": 0.1, "v": 0.1},
{"u": 0.9, "v": 0.1},
{"u": 0.1, "v": 0.9},
{"u": 0.9, "v": 0.9},
{"u": 0.5, "v": 0.5}
],
"on": [
{"trigger": "movePoint", "modify": "movePoint", "values": "{u: movePoint.u, v: movePoint.v}"}
]
}
],
"scales": [
{
"name": "xscale",
"domain": [0, 1],
"range": "width"
},
{
"name": "yscale",
"domain": [0, 1],
"range": "height"
}
],
"marks": [
{
"name": "points",
"type": "symbol",
"zindex": 1,
"from": {"data": "table"},
"interactive": false,
"encode": {
"enter": {
"fill": {"value": "black"},
"size": {"value": 36},
"x": {"scale": "xscale", "field": "u"},
"y": {"scale": "yscale", "field": "v"}
}
}
},
{
"type": "path",
"from": {"data": "points"},
"encode": {
"enter": {
"stroke": {"value": "firebrick"},
"fill": {"value": "transparent"}
}
},
"transform": [
{
"type": "voronoi",
"x": "datum.x", "y": "datum.y",
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
}
]
}
Вроде уже сигнал работает хорошо. Я тестировал его с помощью режима отладки Vega, и, похоже, он работает так, как должен:
- сигнал меняется только тогда, когда мышь перемещается во время ее нажатия
- значения сигналов находятся в правой системе координат, используемой данными, то есть координаты от 0 до 1
Что не работает, так это взаимодействие: я не могу перетаскивать точки, и данные не меняются при взаимодействии с мышью. Пытался переместить триггер с данных на метки, но тоже не вышло. Что мне нужно сделать, чтобы можно было перетаскивать точки?