[Solved]-D3.js - Zoom network graph with canvas and then drag node-d3.js

so i guess the solution could be found in this post: mouse coordinates don't match after scaling and panning canvas. draw function shouldn't be updated - stays the same as before.

function draw() {
    // draw links
    context.strokestyle = '#ccc';
    context.beginpath();
    links.foreach(function(d) {
        context.moveto(d.source.x, d.source.y);
        context.lineto(d.target.x, d.target.y);
    });
    context.stroke();

    // draw nodes
    context.fillstyle = 'steelblue';
    context.beginpath();
    nodes.foreach(function(d) {
        context.moveto(d.x, d.y);
        context.arc(d.x, d.y, radius, 0, 2 * math.pi);
    });
    context.fill();
}

dragging handler function should be updated:

var rect = canvas.getboundingclientrect();

function ondrag() {
    d3.event.subject.fx = ((d3.event.sourceevent.pagex - rect.left) - translation[0]) / scale;
    d3.event.subject.fy = ((d3.event.sourceevent.pagey - rect.top) - translation[1]) / scale;
}