GoJS SVG Renderer - Data Attributes

When using the GoJS SVG renderer, is there a way to set metadata in the diagram which would render as data attributes on corresponding SVG elements? This would be very useful for writing tests.

Possibly. But as-is it may be difficult to keep it in sync. How often would you want to change this data?

If you want to create a diagram, and write the data once, and then test something, you can use GraphObject.svg to get a reference to the SVG element for a GraphObject. For example:


would give you the SVG DOM node (a <g> element) for that go.Node.

However, it is possible and even likely that our SVG implementation changes over different versions. So you may want to be careful about what you attach and what you expect.

Thank you for the prompt reply!

I have a genogram which renders circles/squares for family members and connects them in a tree structure. I want to get as much metadata and structural information as possible in the SVG DOM so it can be interrogated by tests. So ideally, I’d want to know from these attributes who is connected to who in the genogram, who is beside who, and other metadata. That cannot be derived from the DOM order as it appears to be random how the SVG elements are added in the DOM. And reading the math of the path elements would probably be brittle.

This diagram is redrawn when one of the family members is clicked on and data about them is edited. So whatever I add, it’d need to go at the level where the diagram is being generated, not afterwards.

Can you simply interrogate via JavaScript instead? This would make the tests work with both the canvas and SVG renderer.

There are a number of navigation methods, like node.findLinksOutOf(), findLinksInto(), etc. That may work for this task.

Many are demoed in this sample: Navigation of Graphs