score:1

Accepted answer

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

Related Query

More Query from same tag