Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Concept Map Network - Node Issue

I am trying to implement Concept Map Network Graph using d3.js. The sample of the graph is available here in the js-fiddle.

js-fiddle

Fiddle Code The node direction is pointing from the left direction only. All the nodes in a right side having the lines from the back of rectangle. I want to display all the nodes point in left as well as from right side.

Expected Graph: Concept Map Expected Graph

like image 813
Musakkhir Sayyed Avatar asked Aug 10 '15 12:08

Musakkhir Sayyed


1 Answers

I found the solution by checking curve position by using this code.

 if(af.x>180)
 {
   af.xOffset = -S;
 }else
 {
   af.xOffset = S;
 }

and by checking the condition for push function

if (ab.x > 180) {
                    H.push({
                        source: ae,
                        target: ab,
                        key: aa,
                        canonicalKey: aa,
                        x1: ae.x + (ab.type === "theme" ? 0 : U),
                        y1: ae.y + K / 2,
                        x2: Math.cos(Y) * X + ab.xOffset,
                        y2: Math.sin(Y) * X
                    })
                }
                else if (ae.x < 180) {
                    H.push({
                        source: ae,
                        target: ab,
                        key: aa,
                        canonicalKey: aa,
                        x1: ae.x + (ab.type === "theme" ? U : 0),
                        y1: ae.y + K / 2,
                        x2: Math.cos(Y) * X + ab.xOffset,
                        y2: Math.sin(Y) * X
                    })
                }

Expected Output was

enter image description here

like image 137
Musakkhir Sayyed Avatar answered Sep 21 '22 16:09

Musakkhir Sayyed