效果：

拖拽並縮小後：

1、確認主次

以力導向圖為藍本

2、增加縮放控制變數

var transform = d3.zoomIdentity;

3、響應放縮事件

d3.select(canvas)
    .call(
        d3.zoom()
            .scaleExtent([1/10, 10])
            .on("zoom", 
                function(){
                    transform = d3.event.transform;
                    render();
                }
            )
    )
 

4、拖拽事件的碰撞檢測和座標轉換

// 合併兩個dragsubject()函式
function subject_from_event() {
    //1、查詢物件時，事件物件的座標是螢幕座標，需要轉換成實際座標
    var ex = transform.invertX(d3.event.x),
        ey = transform.invertY(d3.event.y);
    var node = simulation.find(ex,ey);
    //2、計算滑鼠是否落在圖形內部，如果落在圖形外返回空以實現畫布的拖拽
    var dx = ex - node.x,
    dy = ey - node.y;
    if
 
(dx*dx+dy*dy <radius*radius){
        //3、力導向圖拖拽事件需要節點的螢幕座標，使用[rx,ry]儲存實際座標，把[x,y]替換成螢幕座標
        node.rx = node.x;
        node.ry = node.y;
        node.x = transform.applyX(node.rx);
        node.y = transform.applyY(node.ry);
        return node;
    }
    return null;
}
function drag_started()
 
{
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    // 力學座標應為實際座標
    d3.event.subject.fx = d3.event.subject.rx;
    d3.event.subject.fy = d3.event.subject.ry;
}
function dragged(){
    // 力學座標應為實際座標
    d3.event.subject.fx = transform.invertX(d3.event.x);
    d3.event.subject.fy = transform.invertY(d3.event.y);
}
function drag_ended(){
    if (!d3.event.active) simulation.alphaTarget(0);
    // 還原[x,y]為實際座標
    d3.event.subject.x = d3.event.subject.rx;
    d3.event.subject.y = d3.event.subject.ry;
    d3.event.subject.fx = null;
    d3.event.subject.fy = null;
}

4、圖元渲染過程畫布的放縮和移動

// 更換ticked()為render()，渲染前進行畫布的放縮和移動
context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);

5、模組化程式碼(force_zoom_canvas.js)

function force_zoom_canvas(canvas_id){
    // TODO 內部變數
    var graph={},
        canvas = document.getElementById (canvas_id),
        context = canvas.getContext("2d"),
        width = canvas.width,
        height = canvas.height,
        transform = d3.zoomIdentity,
        distance = 47,
        radius = 13,
        simulation = d3.forceSimulation();
    // TODO 配置D3
    function initialize(nodes,links){
        graph.nodes = nodes;
        graph.links = links;
        simulation
            .force("link", d3.forceLink().distance(distance).strength(1).id(function(n) { return n.id; }))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(width / 2, height / 2))
            .nodes(graph.nodes)
            .on("tick",render);
        simulation.force("link")
            .links(graph.links);
        d3.select(canvas)
            .call(d3.drag().container(canvas).subject(subject_from_event).on("start", drag_started).on("drag", dragged).on("end", drag_ended))
            .call(d3.zoom().scaleExtent([1/10, 10]).on("zoom", function(){transform = d3.event.transform;render();}))
            .call(render);
        //TODO 圖元發現
        function subject_from_event() {
            var ex = transform.invertX(d3.event.x),
                ey = transform.invertY(d3.event.y);
            var node = simulation.find(ex,ey);
            var dx = ex - node.x,
                dy = ey - node.y;
            if(dx*dx+dy*dy <radius*radius){
                node.rx = node.x;
                node.ry = node.y;
                node.x = transform.applyX(node.rx);
                node.y = transform.applyY(node.ry);
                return node;
            }
            return null;
        }
        //TODO 圖元拖拽
        function drag_started(){
            if (!d3.event.active) simulation.alphaTarget(0.3).restart();
            d3.event.subject.fx = d3.event.subject.rx;
            d3.event.subject.fy = d3.event.subject.ry;
        }
        function dragged(){
            d3.event.subject.fx = transform.invertX(d3.event.x);
            d3.event.subject.fy = transform.invertY(d3.event.y);
        }
        function drag_ended(){
            if (!d3.event.active) simulation.alphaTarget(0);
            d3.event.subject.x = d3.event.subject.rx;
            d3.event.subject.y = d3.event.subject.ry;
            d3.event.subject.fx = null;
            d3.event.subject.fy = null;
        }
    }
    // TODO 圖元渲染
    function render(){
        context.save();
        context.clearRect(0, 0, width, height);
        context.translate(transform.x, transform.y);
        context.scale(transform.k, transform.k);
        graph.links.forEach(function(l){
            context.beginPath();
            context.moveTo(l.source.x, l.source.y);
            context.lineTo(l.target.x, l.target.y);
            context.strokeStyle = "#aaa";
            context.stroke();
        });
        graph.nodes.forEach(function(n){
            context.fillStyle= "#777";
            context.beginPath();
            context.moveTo(n.x+radius, n.y);
            context.arc(n.x, n.y,radius,0,Math.PI*2);
            context.fill();
            context.fillStyle= "#fff";
            context.stroke();
            var w = context.measureText(n.id).width;
            var h = context.measureText(n.id.substr(0,1)).width;
            context.fillText(n.id, n.x-w/2, n.y+h/2);
        });
        context.restore();
    }
    // TODO 介面
    graph = {
        "Run":initialize
    };
    return graph;
}

6、force_zoom_canvas.js呼叫方式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="d3.v4.js"></script>
    <script src="force_zoom_canvas.js"></script>
    <canvas width="1280" height="720" id="force_zoom"></canvas><p/>
</head>
<body>
<script>
    var fzc = force_zoom_canvas("force_zoom");
    fzc.Run([
        {"id": "2"},{"id": "3"},{"id": "5"},{"id": "7"},{"id": "11"},{"id": "13"},{"id": "17"},{"id": "19"},{"id": "23"},{"id": "29"},{"id": "31"},{"id": "37"},{"id": "41"},{"id": "43"},{"id": "47"},{"id": "51"},{"id": "53"},{"id": "1"},{"id": "8"},{"id": "21"},{"id": "34"},{"id": "55"}
    ],[
        {"source": "55", "target": "1"},{"source": "55", "target": "8"},{"source": "55", "target": "21"},{"source": "55", "target": "34"},{"source": "1", "target": "2"},{"source": "1", "target": "3"},{"source": "1", "target": "5"},{"source": "1", "target": "7"},{"source": "8", "target": "11"},{"source": "8", "target": "13"},{"source": "8", "target": "17"},{"source": "8", "target": "19"},{"source": "21", "target": "23"},{"source": "21", "target": "29"},{"source": "21", "target": "31"},{"source": "34", "target": "37"},{"source": "34", "target": "41"},{"source": "34", "target": "43"},{"source": "34", "target": "47"},{"source": "34", "target": "51"},{"source": "34", "target": "53"}
    ]);
</script>
</body>
</html>