Multiple parent? - Githubissues

fab-araujo commented 7 years ago

Is is possible to add multiple parents relations?

SondreNjaastad commented 7 years ago

I was able to get this working with a workaround. I'm a beginner in JS, so don't use this for an exam or anything, as it probably will bug somethings out :P But it works!

added a new function in the Tree.prototype

        addConnectionToNode: function( treeNode, hidePoint, targetNode ) {
            var stacked = treeNode.stackParentId,
                connLine,
                parent = ( targetNode ),

                pathString = hidePoint?
                    this.getPointPathString(hidePoint):
                    this.getPathString(parent, treeNode, stacked);

            // if ( this.connectionStore[treeNode.id] ) {
                //connector already exists, update the connector geometry
                // connLine = this.connectionStore[treeNode.id];
                // this.animatePath( connLine, pathString );
            // }
            {
                connLine = this._R.path( pathString );
                this.connectionStore[treeNode.id] = connLine;

                // don't show connector arrows por pseudo nodes
                if ( treeNode.pseudo ) {
                    delete parent.connStyle.style['arrow-end'];
                }
                if ( parent.pseudo ) {
                    delete parent.connStyle.style['arrow-start'];
                }

                connLine.attr( parent.connStyle.style );

                if ( treeNode.drawLineThrough || treeNode.pseudo ) {
                    treeNode.drawLineThroughMe( hidePoint );
                }
            }
            treeNode.connector = connLine;
            return this;
        }

then calling this whenever you need to add new connections, for me i did like this in the HTML:

        new Treant( chart_config );
        window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(1));
        window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(4));

Like i said, i'm sure there is ways that this can fail, and i just figured it out, so it's barely tested. You can try it, and if you find a bug with it, i can see if i can solve it :)

EDIT: You need to expose the tree object, i did that in the far bottom of Treant.js

        this.tree = TreeStore.createTree( jsonConfig );
        this.tree.positionTree( callback );
--------> window.tree = this.tree;

fab-araujo commented 7 years ago

Thanks! I Will try! Em qui, 20 de abr de 2017 às 04:13, Thrakon notifications@github.com escreveu:

I was able to get this working with a workaround. I'm a beginner in JS, so don't use this for an exam or anything, as it probably will bug somethings out :P But it works!

added a new function in the Tree.prototype
  addConnectionToNode: function( treeNode, hidePoint, targetNode ) {
      var stacked = treeNode.stackParentId,
          connLine,
          parent = ( targetNode ),

          pathString = hidePoint?
              this.getPointPathString(hidePoint):
              this.getPathString(parent, treeNode, stacked);

      // if ( this.connectionStore[treeNode.id] ) {
          //connector already exists, update the connector geometry
          // connLine = this.connectionStore[treeNode.id];
          // this.animatePath( connLine, pathString );
      // }
      {
          connLine = this._R.path( pathString );
          this.connectionStore[treeNode.id] = connLine;

          // don't show connector arrows por pseudo nodes
          if ( treeNode.pseudo ) {
              delete parent.connStyle.style['arrow-end'];
          }
          if ( parent.pseudo ) {
              delete parent.connStyle.style['arrow-start'];
          }

          connLine.attr( parent.connStyle.style );

          if ( treeNode.drawLineThrough || treeNode.pseudo ) {
              treeNode.drawLineThroughMe( hidePoint );
          }
      }
      treeNode.connector = connLine;
      return this;
  }
then calling this whenever you need to add new connections, for me i did like this in the HTML:
  new Treant( chart_config );
  window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(1));
  window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(4));
Like i said, i'm sure there is ways that this can fail, and i just figured it out, so it's barely tested. You can try it, and if you find a bug with it, i can see if i can solve it :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-295605983, or mute the thread https://github.com/notifications/unsubscribe-auth/AGvyqSd81-AyGrP1ciQ1qjT_g_VCtU4iks5rxwWygaJpZM4M1swJ .

-- SDS,

M.Sc Fabrício A. Araújo Universidade Federal do Pará Doutorando em Genética e Biologia Molecular (Bioinformática) (91) 98244-0719

sarvweb commented 7 years ago

can you provide the demo for that functionality.

SondreNjaastad commented 7 years ago

This is the tree i was able to make. To skip nodes, i made 1 dummy node (Under the 3 stacked) and then used the same function between the dummy node and the second last one.

sarvweb commented 7 years ago

thanks for you reply. this is really awesome work by you. can you provide the html, js and css code for this so that i can use in my website. Also let me know how implement this functionality.

SondreNjaastad commented 7 years ago

here is a link to the modifyed Treant.js: https://pastebin.com/mvi8PxyS

then in your HTML type:


    new Treant( chart_config );
    window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(1));
    window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(7));
</script>````

This connects node 3 and 1, and 3 and 7.

I'm sorry but i cannot share the CSS as it is owned by a customer of mine, and not mine to share

sarvweb commented 7 years ago

Thanks for the provide the source code. http://fperucic.github.io/treant-js/

I have only one question more, can you send the demo link from treant.js site that you have used in your application. I mean which demo you have used for your app.

Plz send the link from them.

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Fri, May 19, 2017 at 11:23 AM, Thrakon notifications@github.com wrote:

here is a link to the modifyed Treant.js: https://pastebin.com/mvi8PxyS

then in your HTML type:

This connects node 3 and 1, and 3 and 7.

I'm sorry but i cannot share the CSS as it is owned by a customer of mine, and not mine to share

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-302615288, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWSchFplvQnrKEyGkHBi9Xfbc7_kkGvks5r7S4-gaJpZM4M1swJ .

SondreNjaastad commented 7 years ago

Oh, ouch, sorry

I used the vendor/raphael.js

sarvweb commented 7 years ago

Hi Thanks for your reply. I have used the script as per you send and its work perfectly. Now i have get one issue while connecting node parent and child node, plz see attached image red and green nodes. The problem is when we use your script to make new node, there is no start point and endpoint arrow like grey line arrows.

I hope you understand my problem. Plz provide the solution, I will be really appreciative.

Thanks in advance. Peeyush

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Fri, May 19, 2017 at 11:42 AM, Thrakon notifications@github.com wrote:

Oh, ouch, sorry

I used the vendor/raphael.js [image: image] https://cloud.githubusercontent.com/assets/3602435/26235362/e58d481e-3c6a-11e7-99a5-b1aaf4fb1bfc.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-302617995, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWScvdZyhwjjzKahfhe3MZ80ALOAQjYks5r7TLPgaJpZM4M1swJ .

SondreNjaastad commented 7 years ago

Can't see any images

sarvweb commented 7 years ago

[image: Inline image 1] Plz see this one, i am talking about red and green line which i create with your script but i need the startpoint and endpoint also in this line as grey arrow in other lines.

Thanks Peeyush

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:13 AM, Thrakon notifications@github.com wrote:

Can't see any images

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-303004277, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWScgN7tsTF2ZmwLTlCGaKInpMVly72ks5r8SCKgaJpZM4M1swJ .

SondreNjaastad commented 7 years ago

Image is not displaying for me, just a text saying "[image: Inline image 1]"

sarvweb commented 7 years ago

Plz check here.

http://103.255.101.14/screenshot.jpg

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:19 AM, Thrakon notifications@github.com wrote:

Image is not displaying for me, just a text saying "[image: Inline image 1]"

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-303004969, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWScmGW1et4qhTQsScPFe_F_fPr2Sl5ks5r8SHfgaJpZM4M1swJ .

SondreNjaastad commented 7 years ago

I see now, this mod was not ment for a top -> down tree, it was ment for left -> right. You will have to make some modifications to the code to make it work top -> down

sarvweb commented 7 years ago

Can you plz send the code for this, i am not able to implement this. I really appreciate your help and support.

Thanks

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:27 AM, Thrakon notifications@github.com wrote:

I see now, this mod was not ment for a top -> down tree, it was ment for left -> right. You will have to make some modifications to the code to make it work top -> down

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-303006009, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWScsXXlbCSWkbN409cLGspn0IRg2aeks5r8SPKgaJpZM4M1swJ .

SondreNjaastad commented 7 years ago

I'm sorry, but i'm not a part of this the Treant-JS team, nor do i have the time to work on it. I needed the left -> right functionality for my own project, and wanted to share the small mod if someone else could use it the way it was. You will have to submit a ticket to the creators of treant-js and see if they can help you. You might know someone who knows enough javaScript to help you out, or you can ask online, i don't know much JS, so i'm sure there is someone out there you have the time to make the modification you need.

sarvweb commented 7 years ago

Ok , Fine.

Thanks a lot for your support.👍

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:47 AM, Thrakon notifications@github.com wrote:

I'm sorry, but i'm not a part of this the Treant-JS team, nor do i have the time to work on it. I needed the left -> right functionality for my own project, and wanted to share the small mod if someone else could use it the way it was. You will have to submit a ticket to the creators of treant-js and see if they can help you. You might know someone who knows enough javaScript to help you out, or you can ask online, i don't know much JS, so i'm sure there is someone out there you have the time to make the modification you need.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-303008675, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWSciLMP1HAVBSgd2aGvtiSDb2yyRcAks5r8SiAgaJpZM4M1swJ .

sarvweb commented 7 years ago

Hi once again. Hope you are doing well.

i have one query related to this code that you have sended earlier.

Looking forward your reply.

Thanks Peeyush

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:26 AM, Peeyush Gupta p.gupta@sarv.com wrote:

Plz check here.

http://103.255.101.14/screenshot.jpg

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:19 AM, Thrakon notifications@github.com wrote:

Image is not displaying for me, just a text saying "[image: Inline image 1]"

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-303004969, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWScmGW1et4qhTQsScPFe_F_fPr2Sl5ks5r8SHfgaJpZM4M1swJ .

sarvweb commented 7 years ago

hi i am looking for your reply. can you send the solution please.

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Tue, May 30, 2017 at 12:16 PM, Peeyush Gupta p.gupta@sarv.com wrote:

Hi once again. Hope you are doing well.

i have one query related to this code that you have sended earlier.

Looking forward your reply.

Thanks Peeyush

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:26 AM, Peeyush Gupta p.gupta@sarv.com wrote:

Plz check here.

http://103.255.101.14/screenshot.jpg

Thanks & Regards, Peeyush Gupta

Design Head+919928362554

Sarv Webs Pvt Ltd. Corporate Office: 503-514, 5th Floor, Sunny Paradise, Tonk road, Jaipur Dir:- 0141- 3367026, 0141-3367000 Email: p.gupta@sarv.com Website: www.sarv.com, www.sarvmail.com, www.tld6.com

On Mon, May 22, 2017 at 11:19 AM, Thrakon notifications@github.com wrote:

Image is not displaying for me, just a text saying "[image: Inline image 1]"

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fperucic/treant-js/issues/61#issuecomment-303004969, or mute the thread https://github.com/notifications/unsubscribe-auth/AOWScmGW1et4qhTQsScPFe_F_fPr2Sl5ks5r8SHfgaJpZM4M1swJ .

dlgoodchild commented 7 years ago

@sarvweb you have waited only a single day before chasing a response to your query. @Thrakon has already provided you a great deal of code and assistance, it is not his nor anybody elses responsibility to solve each of your challenges; I would suggest you learn some patience as these people are maybe busy with their own work and challenges and may not be able, or simply may not want, to dedicate more time to this.

As @Thrakon has provided a solution to the original query, so I will close this as it's not a feature I can imagine will be implemented into the core library any time soon.

Method-Development commented 5 years ago

@Thrakon Sorry I know this is old but I appreciate what you added!

I just for the life of me cant get it right. If you could maybe tell me what I am doing wrong I would greatly appreciate it.

Here is my code in it's entirety:

I'm not getting any errors and I see the nodes when I use console.log({object}).

aliqusai commented 2 years ago

I was able to get this working with a workaround. I'm a beginner in JS, so don't use this for an exam or anything, as it probably will bug somethings out :P But it works!

added a new function in the Tree.prototype

      addConnectionToNode: function( treeNode, hidePoint, targetNode ) {
          var stacked = treeNode.stackParentId,
              connLine,
              parent = ( targetNode ),

              pathString = hidePoint?
                  this.getPointPathString(hidePoint):
                  this.getPathString(parent, treeNode, stacked);

          // if ( this.connectionStore[treeNode.id] ) {
              //connector already exists, update the connector geometry
              // connLine = this.connectionStore[treeNode.id];
              // this.animatePath( connLine, pathString );
          // }
          {
              connLine = this._R.path( pathString );
              this.connectionStore[treeNode.id] = connLine;

              // don't show connector arrows por pseudo nodes
              if ( treeNode.pseudo ) {
                  delete parent.connStyle.style['arrow-end'];
              }
              if ( parent.pseudo ) {
                  delete parent.connStyle.style['arrow-start'];
              }

              connLine.attr( parent.connStyle.style );

              if ( treeNode.drawLineThrough || treeNode.pseudo ) {
                  treeNode.drawLineThroughMe( hidePoint );
              }
          }
          treeNode.connector = connLine;
          return this;
      }

then calling this whenever you need to add new connections, for me i did like this in the HTML:

      new Treant( chart_config );
      window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(1));
      window.tree.addConnectionToNode(window.tree.nodeDB.get(3), false,window.tree.nodeDB.get(4));

Like i said, i'm sure there is ways that this can fail, and i just figured it out, so it's barely tested. You can try it, and if you find a bug with it, i can see if i can solve it :)

EDIT: You need to expose the tree object, i did that in the far bottom of Treant.js

      this.tree = TreeStore.createTree( jsonConfig );
      this.tree.positionTree( callback );
--------> window.tree = this.tree;

hey currently we have tree structure where when we click on a user i.e parent it shows the users under them like child but now we want to implement is there a parent's parent above it like when we click on parent it should show the user above it how this can be achieved can u please help @[SondreNjaastad]

fperucic / treant-js

Multiple parent? #61