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

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:

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

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:

• javascript
• jquery
• d3.js

• It's hard to interpret your desired behavior, but it sounds like the behavior you want is: when you hover over any node "A", recursively highlight all nodes linked from the root nodes associated with "A". In your first example, that means hovering over "1to1media.", for example, would highlight nearly every node on the page, since the root of "1to1media." is "webmetro.", which is linked to nearly every other node. Is that what you're asking for? – Palpatim Commented Aug 12, 2015 at 14:15
• Hi Palpatim, I updated my question. kindly go through it. Let me know if you have any solution for this. – Musakkhir Sayyed Commented Aug 14, 2015 at 5:19

2 Answers 2

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

The problem you're having is that the node links join to the top left corner. of that central column.

You need to:

1. Find the source of all links going to the right hand side.
2. Offset the source x position by the width of the central column.

It's possible I've got the source and target mixed up. The code looks partially minified, so it's quite hard to read.

You can get the width of an element relatively easily (Example).

You can recognise whether a link should be changed by paring the source and target x positions.

Alternatively, you could look at nodes which link to something which is on the right-hand side, that might prove slightly more plex but recognize links which need changing more accurately.

EDIT:

You might also try binding to the centre of the node, instead of the corner.