关于d3.js：WebGL Canvas上的交互-PIXI D3

Interactivity on WebGL Canvas - PIXI + D3

我使用pixi.js和d3进行了数据可视化-概念证明。它应在WebGL canvas上运行以启用自定义着色器。
可以在https://codepen.io/stopyransky/full/vrMxKQ/

查看当前状态

目标是具有以下交互功能：

单击并拖动sprite以设置它的新位置
平移
到屏幕缩放(缩放)

我在平移和缩放上陷入困境，我尝试了以下解决方案，可以正确识别事件，但无法移动图形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

d3.select(app.view)
.call(d3.zoom()
.scaleExtent([0.5, 8])
.on("zoom", function zoomed() {
transform = d3.event.transform;
if(!globalDragging) updateSimulationOnZoom();
})
);

function updateSimulationOnZoom() {
if(d3.event.sourceEvent.type === 'wheel') {
console.log('zooming')
}
if(d3.event.sourceEvent.type === 'mousemove') {
console.log("paning");

data.sprites.forEach(sprite => {
sprite.fx += transform.x
sprite.fy += transform.y
})
}
}

在这种情况下如何在webgl canvas上正确实现d3缩放和平移？