在Vega中拖动数据点的鼠标交互

Question

我正在努力更深入地理解Vega图中的交互。目前，我想修改文档中的Voronoi示例，这样您就不会添加和删除点，而是拖动现有的点。我的代码如下：

{
"$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之间的坐标

不起作用的是交互：我不能拖动点，数据在鼠标交互时也不会改变。我试图将触发器从数据移动到标记，但也没有成功。我必须做些什么才能拖动这些点？

Answer 1

我发现了如何为自己做到这一点。问题是，我使用的信号计算出了正确的新坐标，但它不包含被拖动对象的ID。我发现添加一个单独的信号是最容易的。因此，我们现在有了"NewPointPosition"(相同的信号，新名称(和"WhichPoint"，而不是一个"MovePoint"信号，它包含被拖动对象的ID。也许这可以组合成一个信号，但也许这样更容易理解。

我的第一个版本中缺少的另一个重要点是，"points"one_answers"path"标记需要"encode"中的"update"子句，而不仅仅是"enter"子句。否则，数据会发生变化，但可视化不会对此做出反应。

工作代码如下：

{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"autosize": "none",
"signals": [
{
"name": "whichPoint",
"on": [
{
"events": "path:click, path:mousemove[event.buttons]{20}",
"update": "datum.datum"
}
]
},
{
"name": "newPointPosition",
"on": [
{
"events": "path:click, path:mousemove[event.buttons]{20}",
"update": "{u: invert('xscale', x()), v: invert('yscale', y())}"
}
]
}
],
"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": "whichPoint", "modify": "whichPoint", "values": "{u: newPointPosition.u, v:newPointPosition.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"},
"encode": {
"enter": {
"fill": {"value": "black"},
"size": {"value": 36},
"x": {"scale": "xscale", "field": "u"},
"y": {"scale": "yscale", "field": "v"}
},
"update": {
"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"}
},
"update": {
"stroke": {"value": "firebrick"},
"fill": {"value": "transparent"}
}
},
"transform": [
{
"type": "voronoi",
"x": "datum.x", "y": "datum.y",
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
}
]
}