javascript - How to dynamically reposition binary tree nodes visually -
i have been working following code: http://bl.ocks.org/npashap/7683252. graphical representation of tree. have stripped away of code (the graceful labels), allowing 2 nodes per parent, , changed data structure array.
the problem left repositioning. original code perfectly. since want binary tree, have let user choose insert left or right child. original reposition code animates first child straight down parent, wrong in binary tree. want either go left or right.
reposition = function (v) { function repos(v) { var lc = getleafcount(v.v), left = v.p.x; //parent's x-position v.c.foreach(function (d) { var vc = d; //saving reference of child in parent object d = tree.getverticebyid(d.v); //actually fetching child object var w = 0; if(d.d == 'right') { w += 15 * lc } if(d.d == 'left') { w -= 15 * lc } d.p = {x: left + w, y: v.p.y + tree.h}; //setting position vc.p = d.p; //setting child's pos in parent obj repos(d); }); } repos(v[0]); };
some of parts of code different original code, because have changed data structure stated before. have tried comment parts may confusing, important math of repositioning.
at first, code seemed work (https://i.stack.imgur.com/gjzoq.png). after testing discovered huge problem repositioning: nodes crash each other (https://i.stack.imgur.com/pdqfy.png)!
conclusion: have tried modify original function take in mind left , right positioning of nodes, not it. wrote variant of method does, still has problems illustrated in pictures. thankful input in matter.
i did quick fix problem.
after running reposition function posted in question, ran function fixed problem. new function goes through levels of tree , checks if nodes close together. if are, algorithm finds closest common ancestor, , increases distance between left , right children. after this, there no more collisions between nodes.
Comments
Post a Comment