Блог

 const treedata = {
          "name": "Top Level",
          "parent": "null",
          "children": [
              {
                "name": "Level 2: A",
                "parent": "Top Level",
                "children": [
                    {
                        "name": "Son of A 232432432",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A 2222",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A 111111",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    }
                ]
            },
            {
                "name": "Level 2: B",
                "parent": "Top Level"
            }
        ]
    }
    function setup(container, treedata) {
            const style = {
                width: window.innerWidth / 2,
                height: window.innerHeight / 2,
                x0: Infinity,
                x1: -Infinity,
                margin: {
                  top: 50,
                  bottom: 50,
                  left: 50,
                  right: 50,
                }
              };

              const tree = d3Tree()
                .size([style.width, style.height])
                .separation(function (a, b) {
                  return (a.parent == b.parent ? 1 : 2) / a.depth;
                });

              const root = tree(d3Hierarchy(treedata));
              root.each(d => {
                d.y = d.depth * 180;
                if (d.x > style.x1) style.x1 = d.x;
                if (d.x < style.x0) style.x0 = d.x;
              });

              const zoom = d3Zoom()
                .scaleExtent([1, 40])
                .on("zoom", zoomed);

              const svg = d3Select(container).select("svg").call(zoom);
              const g = svg.append("g")
                .attr("font-size", 14)
                .attr("transform",
                  "translate("   0   ","   style.margin.top   ")");

              const link = g.append("g")
                .attr("class", "lines")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
                .selectAll("path")
                .data(root.links())
                .join("path")
                .attr("d", linkVertical);

              const node = g.append("g")
                .attr("class", "line-text")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll("g")
                .data(root.descendants())
                .enter().append("g")
                .attr("class", d => "node"   (d.children ? " node-parent" : " node-child"))
                .join("g")
                .attr("transform", d => "translate("   d.x   ","   d.y   ")");

              node.append("circle")
                .attr("fill", d => d.children ? "#555" : "#999")
                .attr("r", 4);

              node.append("text")
                .attr("dy", "0.31em")
                .attr("x", d => d.children ? -6 : 6)
                .attr("text-anchor", d => d.children ? "end" : "start")
                .text(d => d.data.name)

              function zoomed({transform}) {
                g.attr("transform", transform);
              }
              function linkVertical(d) {
                return `M${d.source.x},${d.source.y}C${(d.source.x   d.target.x) / 2},${d.target.y} ${(d.source.x   d.target.x) / 2},${d.source.y} ${d.target.x},${d.target.y}`;
              }
        }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>