我有一个数据可视化与pixi.js和d3 -一个概念的证明。它应该在WebGL画布上运行,以启用自定义着色器。当前状态可以在https://codepen.io/stopyransky/full/vrMxKQ/上查看
其目标是具有以下互动性特征:
我被困在平移和缩放,我已经尝试了下面的解决方案和事件是正确识别,但我无法移动的图表。
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画布上正确地实现d3缩放和pan?
发布于 2018-08-29 18:14:54
回答我的问题以结束这个话题--根据我的评论:
有一种干净的方法可以实现与pixi-视口的缩放和摇摄交互。它与pixi应用程序很好地融合在一起--作为可以添加图形/精灵的舞台。
https://stackoverflow.com/questions/51279965
复制相似问题