記錄d3.js 力導向圖的平移縮放，類似地圖導航點擊某一項移動到當前位置

項目中有用到d3.js用於圖結構的查詢，

需求如下：

• 右上角有個模糊搜索功能,查詢出來的結果用列表展示
• 點擊列表的某一列，要求畫布移動到當前選中的節點的位置，基於畫布正中間

搜索出來的結果列表展示用的element-ui表格，前台進行分頁，不依賴后台，下面記錄一下svg的平移

    function translateSvg(d){
        //獲取svg的父元素
        const parentBox = svg.node().parentElement
        //獲取父元素的寬度
        const fullWidth = parentBox.clientWidth
        //獲取父元素的高度
        const fullHeight = parentBox.clientHeight
        /*畫布的移動,加上移動時平滑的動畫效果
         *下面的fullWidth / 2 ,fullHeight / 2 基於畫布的x，y,就是畫布的正中間
         *scale就是畫布的放大縮小，小於1是縮放，大於1是放大
         * d 的數據來源是點擊表格的當前行的數據，就是你選中的幾點的數據，取數據的x和y的坐標值
        */
        svg.transition()
           .duration(500)
           .call(zoom.transform, d3.zoomIdentity.translate(fullWidth / 2, fullHeight / 2).scale(1).translate(-d.x,-d.y))
    }