CODEWITHSUNDEEP
d3.jscanvaswebglinteractivepixi.js
mtx
mtx

Reputation: 1234

Interactivity on WebGL Canvas - PIXI + D3

I have a data visualisation with pixi.js and d3 - a proof of concept. It should run on WebGL canvas to enable custom shaders. Current state can be viewed at https://codepen.io/stopyransky/full/vrMxKQ/

The goal is to have following interactivity features:

I am stuck on panning and zooming, I have tried below solution and events are recognized properly but I am unable to move the graph. 

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
  })
 }
}

How to implement properly d3 zoom and pan on webgl canvas in this situation?

Upvotes: 2

Views: 1515

Answers (1)

mtx
mtx

Reputation: 1234

Answering my question to close this topic - as per my comment:

There is clean way to achieve zooming and panning interactivity with pixi-viewport. It blends nicely with pixi application - acts as stage to which graphics/sprites can be added.

Upvotes: 1

Related Questions