Concept Map Network - Node Issue

Question

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:

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.com", for example, would highlight nearly every node on the page, since the root of "1to1media.com" is "webmetro.com", which is linked to nearly every other node. Is that what you're asking for? — Palpatim, Aug 12 '15 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, Aug 14 '15 at 05:19

Musakkhir Sayyed · Accepted Answer · 2015-08-19T10:18:34.937

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

score 2 · Answer 2 · edited May 23 '17 at 12:23

2

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

You need to:

Find the source of all links going to the right hand side.
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 comparing 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 complex but recognize links which need changing more accurately.

EDIT:

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

edited May 23 '17 at 12:23

Community

1
1

answered Aug 13 '15 at 03:12

Roland Heath

334
2
10

It is very difficult to identify the node which is going on the right side, and How to recognize offset for each node? – Musakkhir Sayyed Aug 14 '15 at 05:23
I think it would be easier to look at the links, they have a source and a destination. So, if destination.x > source.x, adjust source.x. If you're still having trouble, just force every link to bind to the centre of the node - that should still give a good effect. – Roland Heath Aug 14 '15 at 07:12

Concept Map Network - Node Issue

2 Answers2