I am building Force Layout with Dragging, Zoom, and Pan in Angular 2, D3 V4, HTML5 Canvas.
I have used primarily two projects as the starting point: Force Dragging III and Drag and Zoom. Both are rebuilt into the demo project below.
The primary problem: On the graph that combines the two above examples, when zoomed in, a dragged node does not track the mouse, but tracks (mouse movement x zoom factor). Pan factor already appears to have been adjusted, but zoom hasn't. Applying d3.transform.applyX or d3.transform.inverseX screws up panning. Help!
Demo project replicating the project is available at: https://github.com/patricknee/d3-angular2-force-drag-zoom-pan
Secondary questions:
1) I don't seem to have TypeScript typing set up correctly and the 'd3' isn't recognized in my import. I did try "npm install d3-v4-typings". Any suggestions?
2) My demo app is a single page app; there are two views each with a version of the draggable force layout. Dragging a node in one affects the positions of the nodes in the second. Is the D3 model a singleton?
Thanks!