SOURCE

 // 嗯，这是最初的数据。
    var treeData = {
  "name": "fdsafad",
  "children": [{
    "name": "浙江CDC",
    "children": [{
      "name": "杭州"
    },
    {
      "name": "宁波"
    },
    {
      "name": "温州"
    },
    {
      "name": "绍兴"
    }]
  },
  {
    "name": "广西CDC",
    "children": [{
      "name": "桂林",
      "children": [{
        "name": "东湖南路社区服务中心",
        "children": [{
          "name": "张医生"
        },
        {
          "name": "李医生"
        },
        {
          "name": "李医生"
        },
        {
          "name": "李医生"
        },
        {
          "name": "李医生"
        },
        {
          "name": "李医生"
        }]
      },
      {
        "name": "解放北路社区服务中心",
        "children": [{
          "name": "张医生"
        },
        {
          "name": "李医生"
        },
        {
          "name": "李医生"
        }]
      }]
    },
    {
      "name": "南宁"
    },
    {
      "name": "柳州"
    },
    {
      "name": "防城港"
    }]
  },
  {
    "name": "黑龙江CDC",
    "children": [{
      "name": "哈尔滨"
    },
    {
      "name": "齐齐哈尔"
    },
    {
      "name": "牡丹江"
    },
    {
      "name": "大庆"
    }]
  },
  {
    "name": "新疆CDC",
    "children": [{
      "name": "乌鲁木齐"
    },
    {
      "name": "克拉玛依"
    },
    {
      "name": "吐鲁番"
    },
    {
      "name": "哈密"
    }]
  }]
};;


    /********************* 1. 初始化D3基本能力（设置宽高等） *********************/
    // 设置图表的宽高和Margin
    var margin = {
        top: 20,
        right: 90,
        bottom: 30,
        left: 90
      },
      width = 1220 - margin.left - margin.right,
      height = 900 - margin.top - margin.bottom;

    // 这里我们将svg元素，和子group元素拆分
    var svg = d3
      .select("body")
      // 在页面的body里添加svg对象
      .append("svg")
      // 设置svg宽高
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom);

    // 子group元素存为view变量
    var view = svg
      // 在svg里添加group元素
      .append("g")
      // 将group放置在左上方
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // 创建zoom操作
    var zoom = d3
      .zoom()
      // 设置缩放区域为0.1-100倍
      .scaleExtent([0.1, 100])
      .on("zoom", () => {
        // 子group元素将响应zoom事件，并更新transform状态
        view.attr(
          "transform",
          "translate(" +
          (d3.event.transform.x + margin.left) +
          "," +
          (d3.event.transform.y + margin.top) +
          ") scale(" +
          d3.event.transform.k +
          ")"
        );
      });

    // svg层绑定zoom事件，同时释放zoom双击事件
    svg.call(zoom).on("dblclick.zoom", () => {});

    var i = 0,
      duration = 750,
      root;

    // 定义菜单选项
    var userMenuData = [
      [{
          text: "菜单1",
          func: function () {
            // id为节点id
            var id = Number($(this).attr("id"))
            alert("菜单1", id)
          }
        },
        {
          text: "菜单2",
          func: function () {
            var id = Number($(this).attr("id"))
            alert("菜单1", id)
          }
        }
      ]
    ];
    // 事件监听方式添加事件绑定
    // $("body").smartMenu(userMenuData, {
    //   name: "chatRightControl",
    //   container: "g.node"
    // });



    initData();

    /********************* 2. 数据初始化绑定（包括数据更新） *********************/
    function initData() {
      // 计算父节点、字节点、高度和深度（parent, children, height, depth）
      root = d3.hierarchy(treeData, function (d) {
        return d.children;
      });
      // 设置第一个元素的初始位置
      root.x0 = height / 2;
      root.y0 = 0;

      // 第二层以上元素收起
      //root.children.forEach(collapse);

      // 更新节点状态
      updateChart(root);

    }



    /********************* 3. 数据更新绑定  *********************/
    function updateChart(source) {
      // 大致计算需要放大的倍数
      var scale =
        (getDepth(root) / 8 || 0.5) +
        (getMax(root) / 12 || 0.5);
      // 定义Tree层级，并设置宽高
      var treemap = d3.tree().size([height * scale, width]);
      // 设置节点的x、y位置信息
      var treeData = treemap(root);

      // 计算新的Tree层级
      var nodes = treeData.descendants(),
        links = treeData.descendants().slice(1);

      // 设置每个同级节点间的y间距为180
      nodes.forEach(function (d) {
        d.y = d.depth * 180;
      });

      // node交互和绘制
      updateNodes(source, nodes);
      // link交互和绘制
      updateLinks(source, links);

      // 为动画过渡保存旧的位置
      nodes.forEach(function (d) {
        d.x0 = d.x;
        d.y0 = d.y;
      });

    }


    /********************* 4. node交互和绘制  *********************/
    function updateNodes(source, nodes) {
      // 给节点添加id，用于选择集索引
      var node = view.selectAll("g.node").data(nodes, function (d) {
        return d.id || (d.id = ++i);
      });

      // 添加enter操作，添加类名为node的group元素
      var nodeEnter = node
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("id", d => d.id)
        // 默认位置为当前父节点的位置
        .attr("transform", function (d) {
          return "translate(" + source.y0 + "," + source.x0 + ")";
        })
        // 添加mouseover事件
        .on("mouseover", d => {
          // 从d3.event获取鼠标的位置
          var transform = d3.event;
          var yPosition = transform.offsetY + 20;
          var xPosition = transform.offsetX + 20;

          // 将浮层位置设置为鼠标位置
          var chartTooltip = d3
            .select(".chartTooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px");

          // 更新浮层内容
          chartTooltip.select(".name").text(d.data.name);

          // 移除浮层hidden样式，展示浮层
          chartTooltip.classed("hidden", false);
        })
        // 添加mouseover事件
        .on("mouseout", () => {
          // 添加浮层hidden样式，隐藏浮层
          d3.select(".chartTooltip").classed("hidden", true);
        })
        // 给每个新加的节点绑定click事件
        .on("click", click)
        // 给每个新加的节点绑定dbclick事件
        .on("dblclick", dblclick);

      // 给每个新加的group元素添加cycle元素
      nodeEnter
        .append("circle")
        .attr("class", "node")
        .attr("r", 1e-6)
        // 如果元素有子节点，且为收起状态，则填充浅蓝色
        .style("fill", function (d) {
          return d._children ? "lightsteelblue" : d.data.children ? "#fff" : "#aaa";
        });

      // 给每个新加的group元素添加文字说明
      nodeEnter
        .append("text")
        .attr("dy", ".35em")
        .attr("x", function (d) {
          return d.children || d._children ? -13 : 13;
        })
        .attr("text-anchor", function (d) {
          return d.children || d._children ? "end" : "start";
        })
        .text(function (d) {
          return d.data.name;
        });

      // 获取update集
      var nodeUpdate = nodeEnter.merge(node);

      // 设置节点的位置变化，添加过渡动画效果
      nodeUpdate
        .transition()
        .duration(duration)
        .attr("transform", function (d) {
          return "translate(" + d.y + "," + d.x + ")";
        });

      // 更新节点的属性和样式
      nodeUpdate
        .select("circle.node")
        .attr("r", 10)
        .style("fill", function (d) {
          return d._children ? "lightsteelblue" : d.data.children ? "#fff" : "#aaa";
        })
        .attr("cursor", "pointer");

      // 获取exit操作
      var nodeExit = node
        .exit()
        // 添加过渡动画
        .transition()
        .duration(duration)
        .attr("transform", function (d) {
          return "translate(" + source.y + "," + source.x + ")";
        })
        // 移除元素
        .remove();

      // exit集中节点的cycle元素尺寸变为0
      nodeExit.select("circle").attr("r", 1e-6);

      // exit集中节点的text元素可见度降为0
      nodeExit.select("text").style("fill-opacity", 1e-6);
    }



    /********************* 5. link交互和绘制  *********************/
    function updateLinks(source, links) {
      // 更新数据
      var link = view.selectAll("path.link").data(links, function (d) {
        return d.id;
      });

      // 添加enter操作，添加类名为link的path元素
      var linkEnter = link
        .enter()
        .insert("path", "g")
        .attr("class", "link")
        // 默认位置为当前父节点的位置
        .attr("d", function (d) {
          var o = {
            x: source.x0,
            y: source.y0
          };
          return diagonal(o, o);
        });

      // 获取update集
      var linkUpdate = linkEnter.merge(link);

      // 更新添加过渡动画
      linkUpdate
        .transition()
        .duration(duration)
        .attr("d", function (d) {
          return diagonal(d, d.parent);
        });

      // 获取exit集
      var linkExit = link
        .exit()
        // 设置过渡动画
        .transition()
        .duration(duration)
        .attr("d", function (d) {
          var o = {
            x: source.x,
            y: source.y
          };
          return diagonal(o, o);
        })
        // 移除link
        .remove();
    }


    /********************* 6. 单击节点事件处理  *********************/
    // 当点击时，切换children，同时用_children来保存原子节点信息
    function click(d) {
      if (d._clickid) {
        // 若在200ms里面点击第二次，则不做任何操作，清空定时器
        clearTimeout(d._clickid);
        d._clickid = null;
      } else {
        // 首次点击，添加定时器，350ms后进行toggle
        d._clickid = setTimeout(() => {
          if (d.children) {
            d._children = d.children;
            d.children = null;
          } else {
            d.children = d._children;
            d._children = null;
          }
          updateChart(d);
          d._clickid = null;
        }, 350);
      }
    }



    /********************* 7. 双击获取子节点事件处理  *********************/
    // 将获取到的节点，添加进data对象中，同时若已获取过不再获取
    function dblclick(d) {
      // 若无d.data.children，则视为未获取
      if (!(d.data && d.data.children)) {
        // 这里模拟请求，1.json - 5.json 随机获取数据
        var randomNum = Math.floor(Math.random() * 5) + 1;
                  // 给子节点绑定父节点
          var children = {
  "name": "Test 1",
  "children": [
    {
      "name": "解放北路社区服务中心A" + randomNum
    },
    {
      "name": "解放北路社区服务中心B" + randomNum
    },
    {
      "name": "解放北路社区服务中心C" + randomNum
    },
    {
      "name": "解放北路社区服务中心D" + randomNum
    },
    {
      "name": "解放北路社区服务中心E" + randomNum
    },
    {
      "name": "解放北路社区服务中心F" + randomNum
    }
  ]
}
.children.map(x => {
            return {
              name: x.name,
              parent: d,
              depth: d.depth + 1,
              data: {
                ...x
              }
            }
          });
          // 将子节点数据绑定在d节点上
          if (children.length) d.children = children;
          // 同时也绑到data上
          d.data.children = children;
          updateChart(d);
      }
    }


    // collapse方法，切换子节点展开收起
    function collapse(d) {
      if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
      }
    }

    // 添加贝塞尔曲线的path，衔接与父节点和子节点间
    function diagonal(s, d) {
      path =
        `M ${s.y} ${s.x}
              C ${(s.y + d.y) / 2} ${s.x},
                ${(s.y + d.y) / 2} ${d.x},
                ${d.y} ${d.x}`;

      return path;
    }

    // 获取最多的子节点数
    function getMax(obj) {
      let max = 0;
      if (obj.children) {
        max = obj.children.length;
        obj.children.forEach(d => {
          const tmpMax = this.getMax(d);
          if (tmpMax > max) {
            max = tmpMax;
          }
        });
      }
      return max;
    }

    // 获取最深层级数
    function getDepth(obj) {
      var depth = 0;
      if (obj.children) {
        obj.children.forEach(d => {
          var tmpDepth = this.getDepth(d);
          if (tmpDepth > depth) {
            depth = tmpDepth;
          }
        });
      }
      return 1 + depth;
    }

<div class="chartTooltip hidden">
  <p>
    <strong class="name"></strong>
  </p>
</div>
  <script src="https://d3js.org/d3.v5.min.js"></script>

@charset "utf-8";
/* smartMenu.css	by zhangxinxu */
.smart_menu_box{display:none; width:300px; position:absolute; z-index:201105;}
.smart_menu_body{padding:1px; border:1px solid #B8CBCB; background-color:#fff; -moz-box-shadow:2px 2px 5px #666; -webkit-box-shadow:2px 2px 5px #666; box-shadow:2px 2px 5px #666;}
.smart_menu_ul{margin:0; padding:0; list-style-type:none;}
.smart_menu_li{position:relative;}
.smart_menu_a{display:block; height:25px; line-height:24px; padding:0 5px 0 25px; color:#000; font-size:12px; text-decoration:none; overflow:hidden;}
.smart_menu_a:hover, .smart_menu_a_hover{background-color:#348CCC; color:#fff; text-decoration:none;}
.smart_menu_li_separate{line-height:0; margin:3px; border-bottom:1px solid #B8CBCB; font-size:0;}
.smart_menu_triangle{width:0; height:0; border:5px dashed transparent; border-left:5px solid #666; overflow:hidden; position:absolute; top:7px; right:5px;}
.smart_menu_a:hover .smart_menu_triangle, .smart_menu_a_hover .smart_menu_triangle{border-left-color:#fff;}
.smart_menu_li_hover .smart_menu_box{top:-1px; left:130px;}
.smart_menu_li:first-child a, .smart_menu_li:nth-child(2) a, .smart_menu_li:nth-child(3) a, .smart_menu_li:nth-child(4) a{
    cursor: default;
}

 .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
  }

  .node text {
    font: 12px sans-serif;
  }

  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
  }

  .chartTooltip {
    position: absolute;
    width: 200px;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    pointer-events: none;
  }

  .chartTooltip.hidden {
    display: none;
  }

  .chartTooltip p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    word-wrap: break-word;
  }