Create a Chart with more than one root

[hemavidal]

Create a Chart with more than one root

[yalperg]

I don't know if anyone is still struggling with this, but this is how I solved it.

First this is the example of data

const ds = {
  id: 'n1',
  children: [
    {
      id: 'n2',
      name: 'NODE-2',
      children: [
        { id: 'n3', name: 'NODE-3' },
        { id: 'n4', name: 'NODE-4' },
        { id: 'n5', name: 'NODE-5' },
        { id: 'n6', name: 'NODE-6' }
      ]
    },
    {
      id: 'n7',
      name: 'NODE-7',
      children: [
        { id: 'n8', name: 'NODE-8' },
      ]
    },
  ]
};

and this is the css

#n1,
#n1 + ul > li::before,
#n1 + ul > li > div::before {
  display: none;
}

[dabeng]

Hi @hemavidal , I' m sorry to say "multiple roots" is in conflict with the core idea of building up orghcart, so I'm not planning to add this feature.

While, there is an exception that you could create a fake root node(hidden element) and regard its child nodes as multiple root nodes. In fact, this is the simplest case of multiple roots chart. If this is your scenario, you can apply this trick.

[hemavidal]

Thanks dabeng! I will try this solution!

[Elektropepi]

Hi!
For anyone wondering, this was my solution for this problem:

/* Hide the very first 3 rows (that represent the pseudo root element) */
.orgchart > table > tbody > tr:nth-child(-n+3) { 
    display: none; 
}

/* in the .node class of the root, search for the first children of root and
    hide their topEdge arrow which is associated to the pseudo root elemen */
.orgchart > table > tbody > tr.nodes > td > table > tbody > tr > td > div.node > i.topEdge {
    display: none;
}

[anotherdevs]

Hi @Elektropepi

Can you post an example of how the data?

[VictorRamDom]

I am also looking for a solution.

[VictorRamDom]

You could share an example of how you did it, please

I need create a root node, but it. in center screen an left right tree
sheet-- --sheet
| --Root --|
sheet-- --sheet

datasource = {
left: children[ 'Name':'a','Title':'b'] //l2r
right:: children[ 'Name':'c','Title':'d'] //r2l
this posible wiht you proyect.?

[gz89]

Hi @Elektropepi

Can you post an example of how the data?

First of all, Thanks to @Elektropepi
This is the example object of Chart.

this.ds = {
   id: 'null',
   name: '',
   title: '',
   children: [
      {
         id: '1',
         name: 'John',
         title: 'CEO',
         children: [
            ...
         ]
      },
      {
         id: '2',
         name: 'John',
         title: 'New Employee',
      }
   ]
}

And you add style.

/* Hide the very first 3 rows (that represent the pseudo root element) */
.orgchart > table > tbody > tr:nth-child(-n+3) { 
    display: none; 
}

/* in the .node class of the root, search for the first children of root and
    hide their topEdge arrow which is associated to the pseudo root elemen */
.orgchart > table > tbody > tr.nodes > td > table > tbody > tr > td > div.node > i.topEdge {
    display: none;
}

It works well for me.

[jaofrod]

In case anyone is still struggling with this, my approach was:

Before rendering the chart i did this to hide the links:

      .linkUpdate(function (d) {
          if (d.depth === 1) {
            d3.select(this)
              .attr('display', 'none');
          } <br>
      })

And this to hide the fake root node:

      .nodeUpdate(function (d) {
          if (d.depth === 0) {
            d3.select(this)
              .attr('display', 'none');
          }
      })