项目中有用到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))
    }