Nodes as (Hyper)links

GoJS
1

Hey there, I am pretty new to GoJS and Java Script in general. My question is very basic and I hope it's not too basic (or stupid...).

If I create a simple diagram or flowchart with some nodes for example:

[code] var nodeDataArray = [

{ key: "1", color: "lightblue", fig: "Ellipse" }, { key: "2", color: "lightblue", fig: "Ellipse" }, { key: "3", color: "lightblue", fig: "Ellipse" }]; [/code]

And got an HTML segment with some Chapters with ID's named after the node keys:

[code]

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

[/code]

is there a simple function to link to the corresponding chapters on the same page when clicking on the node? I bet it's simple and I just didn't think the right way but after searching alot I'm super confused what to do.

Thanks alot.

-M

2

If you take a look at the Class Hierarchy sample or the Euler Diagram sample, clicking (or double-clicking in the case of the Class Hierarchy sample) calls the window.open method. You can construct whatever URI you want, including using “#” tags or “?” queries.

If you define the click or doubleClick handler on the Node (i.e. at top-level in your node template), then the second argument to the handler will be the node itself. Let’s say you name that second argument “node”. Then “node.data” evaluates to the bound data, and then “node.data.color” evaluates to whatever property you want to refer to.

3

Thanks for your reply! So a working function for me looks like this:

[code] function nodeclick(event, node) { window.open("#"+node.data.key); }[/code]

The problem I have is that I don't want a new window opened but rather scroll down to the corresponding chapter while staying on the same page.

I also tried [code]document.write("");[/code] but this just breaks everything...

4

Oh, so you want to stay on the same page with the Diagram? Find the element you want and call Element.scrollIntoView on it. This has nothing to do with GoJS.

5

Thanks again for the quick answer, I use this and it seems to work:

[code] window.location.href = "#" + node.data.key; [/code]