可折叠径向树 D3.js v5

Question

我正在尝试在 d3.js v5 中获得可折叠的径向树。 v3 有很多示例，但我似乎找不到任何适用于 v5 的可靠内容。我找到了这个例子 d3.js v3 radial tree 并发现这与 v5 不兼容。 :

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { console.log(d);return [d.y, d.x / 180 * Math.PI]; }); 

我知道使用 linkRadial 为 d3.svg.diagonal 建议了替代方案，但这似乎也不起作用。我在控制台上没有收到任何错误，但我得到了一个空格。但是，当我检查元素时，我确实在 DOM 中看到了它。

谁能指出我 v5 中的可折叠径向树？

更新：我从 ngOninit

调用此函数

 createTree(input) {
    var diameter = 800;

    var margin = { top: 20, right: 120, bottom: 20, left: 120 },
      width = diameter,
      height = diameter;

    var i = 0,
      duration = 350,
      root;

    var tree = d3.tree()
      .size([360, diameter / 2 - 80])
      .separation(function (a, b) { return (a.parent == b.parent ? 1 : 10) / a.depth; });

    // var diagonal = d3.svg.diagonal.radial()
    //   .projection(function (d) { return [d.y, d.x / 180 * Math.PI]; });
    var diagonal = d3.linkRadial<HierarchyPointLink<Datum>, HierarchyPointNode<Datum>>()
    .angle(function(d:any) { return d.x; })
    .radius(function(d:any) { return d.y; })

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

    root = input;
    root.x0 = height / 2;
    root.y0 = 0;

    //root.children.forEach(collapse); // start with all children collapsed
    update(root);

    d3.select(self.frameElement).style("height", "800px");

    function update(source) {
      const treeRoot = hierarchy(root)
      tree(treeRoot)
      // Compute the new tree layout.
      // var nodes = tree.nodes(root),
      //     links = tree.links(nodes);
      // nodes
      const nodes = treeRoot.descendants()
      // links
      const links = treeRoot.links()
      // Normalize for fixed-depth.
      nodes.forEach(function (d: any) { d.y = d.depth * 80; });

      // Update the nodes…
      var node = svg.selectAll("g.node")
        .data(nodes, function (d: any) { return d.id || (d.id = ++i); });

      // Enter any new nodes at the parent's previous position.
      var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        //.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
        .on("click", click);

      nodeEnter.append("circle")
        .attr("r", 1e-6)
        .style("fill", function (d: any) { return d._children ? "lightsteelblue" : "#fff"; });

      nodeEnter.append("text")
        .attr("x", 10)
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        //.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length * 8.5)  + ")"; })
        .text(function (d: any) { return d.name; })
        .style("fill-opacity", 1e-6);

      // Transition nodes to their new position.
      var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function (d: any) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

      nodeUpdate.select("circle")
        .attr("r", 4.5)
        .style("fill", function (d: any) { return d._children ? "lightsteelblue" : "#fff"; });

      nodeUpdate.select("text")
        .style("fill-opacity", 1)
        .attr("transform", function (d: any) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; });

      // TODO: appropriate transform
      var nodeExit = node.exit().transition()
        .duration(duration)
        //.attr("transform", function(d) { return "diagonal(" + source.y + "," + source.x + ")"; })
        .remove();

      nodeExit.select("circle")
        .attr("r", 1e-6);

      nodeExit.select("text")
        .style("fill-opacity", 1e-6);

      // Update the links…
      var link = svg.selectAll("path.link")
        .data(links, function (d: any) { return d.target.id; });

      // Enter any new links at the parent's previous position.
      link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function(d) {
          let data = <HierarchyPointLink<Datum>>{
            source: {
              x: source.x0,
              y: source.y0
            },
            target: {
              x: source.x0,
              y: source.y0
            }
          };
          // var o = {x: source.x0, y: source.y0};
          return diagonal(data);
        });

      // Transition links to their new position.
      link.transition()
        .duration(duration)
        .attr("d", diagonal);
    //     .attr("d", d3.linkRadial<HierarchyPointLink<Datum>, HierarchyPointNode<Datum>>()
    // .angle(function(d:any) { return d.x; })
    // .radius(function(d:any) { return d.y; }));

      // Transition exiting nodes to the parent's new position.
      link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
          let data = <HierarchyPointLink<Datum>>{
            source: {
              x: source.x0,
              y: source.y0
            },
            target: {
              x: source.x0,
              y: source.y0
            }
          };
          // var o = {x: source.x0, y: source.y0};
          return diagonal(data);
        })
        // .attr("d", function (d) {
        //   var o = { x: source.x, y: source.y };
        //   return diagonal({ source: o, target: o });
        // })
        .remove();

      // Stash the old positions for transition.
      nodes.forEach(function (d: any) {
        d.x0 = d.x;
        d.y0 = d.y;
      });
    }

    // Toggle children on click.
    function click(d) {
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }

      update(d);
    }

    // Collapse nodes
    function collapse(d) {
      if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
      }
    }
  }