可折叠径向树D3.js v5

我试图在d3.JSV5中获得一个可折叠的径向树。v3有很多例子，但我似乎找不到v5的任何可靠的例子。我找到了这个示例，发现它与v5不兼容。 :

我知道有人建议使用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;
      }
    }
  }

createTree（输入）{
var直径=800；
var margin={顶部：20，右侧：120，底部：20，左侧：120}，
宽度=直径，
高度=直径；
var i=0，
持续时间=350，
根；
var tree=d3.tree（）
.尺寸（[360，直径/2-80]）
.separation（函数（a，b）{return（a.parent==b.parent？1:10）/a.depth；}）；
//var diagonal=d3.svg.diagonal.radial（）
//.投影（函数（d）{return[d.y，d.x/180*Math.PI]；}）；
var对角线=d3.linkRadial（）
.angle（函数（d:any）{return d.x；}）
.radius（函数（d:any）{返回d.y；}）
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“平移”（“+diameter/2+”，“+diameter/2+”））；
根=输入；
root.x0=高度/2；
root.y0=0；
//root.children.forEach（折叠）；//从所有折叠的子级开始
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“800px”）；
函数更新（源）{
const treeRoot=层次结构（根）
树（treeRoot）
//计算新的树布局。
//变量节点=树节点（根），
//链接=树。链接（节点）；
//节点
const nodes=treeRoot.substands（）
//链接
const links=treeRoot.links（）
//为固定深度进行规格化。
forEach（函数（d:any）{d.y=d.depth*80；}）；
//更新节点…
var node=svg.selectAll（“g.node”）
.data（节点，函数（d:any）{返回d.id | |（d.id=++i）；}）；
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
//.attr（“转换”，函数（d）{return”旋转（“+（d.x-90）+”）平移（“+d.y+”）；}）
。开启（“点击”，点击）；
nodeEnter.append（“圆”）
.attr（“r”，1e-6）
.style（“fill”，函数（d:any）{return d._children？“lightsteelblue”：“#fff”}）；
nodeEnter.append（“文本”）
.attr（“x”，10）
.attr（“dy”，“.35em”）
.attr（“文本锚定”、“开始”）
//.attr（“transform”，函数（d）{returnd.x<180？“translate（0）”：“rotate（180）translate”（“+（d.name.length*8.5）+”）；）
.text（函数（d:any）{返回d.name；}）
.样式（“填充不透明度”，1e-6）；
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d:any）{return“rotate”（+（d.x-90）+”）translate（+d.y+）；}）
节点更新。选择（“圆圈”）
.attr（“r”，4.5）
.style（“fill”，函数（d:any）{return d._children？“lightsteelblue”：“#fff”}）；
nodeUpdate.select（“文本”）
.style（“填充不透明度”，1）
.attr（“transform”，函数（d:any）{返回d.x<180？“translate（0）”：“rotate（180）translate”（“+（d.name.length+50）+”）；}；
//TODO:适当的转换
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
//.attr（“转换”，函数（d）{return”对角线（“+source.y+”，“+source.x+”）；}）
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，1e-6）；
nodeExit.select（“文本”）
.样式（“填充不透明度”，1e-6）；
//更新链接…
var link=svg.selectAll（“path.link”）
.data（链接，函数（d:any）{返回d.target.id；}）；
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
让数据={
资料来源：{
x:source.x0，
y:source.y0
},
目标：{
x:source.x0，
y:source.y0
}
};
//var o={x:source.x0，y:source.y0}；
返回对角线（数据）；
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//.attr（“d”，d3.linkRadial（）
//.angle（函数（d:any）{return d.x；}）
//.radius（函数（d:any）{返回d.y；}）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
让数据={
资料来源：{
x:source.x0，
y:source.y0
},
目标：{
x:source.x0，
y:source.y0
}
};
//var o={x:source.x0，y:source.y0}；
返回对角线（数据）；
})
//.attr（“d”，函数（d）{
//var o={x:source.x，y:source.y}；
//返回对角线（{source:o，target:o}）；
// })
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d:any）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}
//折叠节点
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 _儿童基金会
 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;
      }
    }
  }