Javascript 如何在具有50000个节点的D3.js中平滑放大和缩小？

我有一个用

D3.js

编写的简单代码

• index.html-它包含html代码
• manyNodes.json-它包含节点的json数据
• dndTree.js-它包含在浏览器上呈现json数据的javascript代码

json数据的格式如下：

    {
    "user_id": 0,
    "name": "Buckner Carrillo",
    "children": [
      {
        "user_id": 13,
        "name": "Snider Barrett"
      },
      {
        "user_id": 14,
        "name": "Janice Atkins",
        "children": [
          {
            "user_id": 11,
            "name": "cdc dd"
          }
        ]
      }
    ]
  }

以下是工作代码：

//获取JSON数据
treeJSON=d3.json（“https://gist.githubusercontent.com/robschmuecker/7926762/raw/adfd3d8017f99d18497dc1592db9416c568353c9/manyNodes.json，函数（错误，树数据）{
//计算节点总数，最大标签长度
var totalNodes=0；
var MaxLabellLength=0；
//用于拖放的变量
var selectedNode=null；
var draggingNode=null；
//平移变量
var panSpeed=200；
var panBoundary=20；//拖动时，距离边20px以内的区域将平移。
//杂项变量
var i=0；
var持续时间=750；
变种根；
//图表的大小
var viewerWidth=$（document）.width（）；
var viewerHeight=$（document.height（）；
var tree=d3.layout.tree（）
.尺寸（[viewerHeight，viewerWidth]）；
//定义d3对角线投影，供节点路径稍后使用。
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
//通过遍历所有节点来执行某些设置的递归辅助函数
功能访问（家长、访客、儿童fn）{
如果（！父项）返回；
探视（家长）；
var childrenFn=childrenFn（父母）；
if（儿童）{
var count=children.length；
对于（变量i=0；i0？d.children:null；
});
//根据节点名称对树进行排序
函数sortTree（）{
树。排序（函数（a，b）{
返回b.name.toLowerCase（）1）{
//删除链接路径
链接=树。链接（节点）；
nodePath=svgGroup.selectAll（“path.link”）
.数据（链接、功能（d）{
返回d.target.id；
}).remove（）；
//删除子节点
nodesExit=svgGroup.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id；
}).过滤器（功能（d，i）{
if（d.id==draggingNode.id）{
返回false；
}
返回true；
}).remove（）；
}
//删除父链接
parentLink=tree.links（tree.nodes（draggingNode.parent））；
svgGroup.selectAll（'path.link'）.filter（函数（d，i）{
if（d.target.id==draggingNode.id）{
返回true；
}
返回false；
}).remove（）；
dragStarted=null；
}
//定义BaseSSVG，附加用于样式设置的类和zoomListener
var baseSvg=d3.选择（“树容器”）.追加（“svg”）
.attr（“宽度”，视图E