'Collapsible graph in D3.JS: Multiple root points

I am looking to create a Collapsible graph using d3js as this one http://bl.ocks.org/d3noob/8375092 but I would like to add many root points (Top Level_1 and Top Level_2 in the example below)

var treeData = [
  {
    "name": "Top Level_1",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ],
"name": "Top Level_2",
        "parent": "null",
        "children": [
          {
            "name": "Level 2_2: A",
            "parent": "Top Level",
            "children": [
              {
                "name": "Son of A_2",
                "parent": "Level 2_2: A"
              },
              {
                "name": "Daughter of A_2",
                "parent": "Level 2_2: A"
              }
            ]
          },
          {
            "name": "Level 2_2: B",
            "parent": "Top Level_2"
          }
        ]

      }
    ];

This example does not work. How could it be possible to create many seperate collapsible trees in the same graph?

Solution 1:^[1]

You can use Google Org Chart which permits multiple roots hereafter a multiple root Chart

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
        ['Bob',''],
        ['Sarah','Bob'],
        ['Léa',''],
        ['Bob','Sandra'],
        ['Sandra','Alex'],
        ['Chris','David'],
        ['David',''],
        ['Jeanette','David']
        
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kemal AL GAZZAH

'Collapsible graph in D3.JS: Multiple root points

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]