Access to Canvas Context for Custom Node Rendering

I see that the Canvas is accessible in the Diagram, but not via a method – or, I need to keep reading the doco!

One of our goals with GoJS is to be able to render the nodes ourselves. This will allow us to display nodal data using visual queues.

For example, we may choose to change the color of a node based on the number of connected nodes, or perform an operation on the properties of nodes that are connected and display that value.

You can imagine that this will allow for much more expressive diagrams.

So, my questions are:

  1. how would we hook a rendering function to the node template?
  2. may we have multiple node templates within a diagram?

Likely more followups as well.

Thank you for your comments.

None of that kind of functionality is accessible at this time. We are hoping that it will never be needed.

Your examples certainly sound like they could be accomplished easily with a little bit of code, or maybe even just with some data binding.

That would be great!

The first case I’m looking at is rendering each node as a pie chart based on a list of slices in the node data.

There may be a different number of slices for each node.

Would you be able to provide your thoughts on how I would create it?

Note: one other use case we were thinking about was the ability to have a background graphic, image, what have you.

With our Pie Diagram we use a bulls-eye on the background with the nodes aligned on it. We built this with .

To make it work, we added our own rendering logic and drew the nodes directly to the canvas.

Thank you for the assistance, have a nice holiday!

Oh, one last note – I was reviewing the Tiger sample, would that be a recommended method for us to create custom node images? Or, is there a better way to handle that.

We’re in the midst of defining functional properties that are called when relationships have changed. To continue your example of having the color of a node be dependent on how many links are connected to it, you could define Node.linkConnected and linkDisconnected functions that update the node color.

Basically it would be something like:

diagram.nodeTemplate = $(go.Node, go.Panel.Auto, { linkConnected: function(n, l, p) { p.fill = computeNodeColor(n); }, linkDisconnected: function(n, l, p) { p.fill = computeNodeColor(n); } }, . . .
where that function could be defined as:

var nodeColors = ["blue", "green", "yellow", "orange", "red", "purple"]; function computeNodeColor(node) { var numlinks = node.linksConnected.count; if (numlinks >= nodeColors.length) return "black"; return nodeColors[numlinks]; }

Background graphics are easy: just create a Part holding whatever you want, position it, and add it to the Diagram:

diagram.add( $(go.Part, { location: new go.Point(0, 0), locationSpot: go.Spot.Center, layerName: "Background", selectable: false }, $(go.Shape, "Circle", { fill: null, stroke: "gray", width: 100, height: 100, position: new go.Point(-50, -50) }), $(go.Shape, "Circle", { fill: null, stroke: "gray", width: 200, height: 200, position: new go.Point(-100, -100) }), $(go.Shape, "Circle", { fill: null, stroke: "gray", width: 300, height: 300, position: new go.Point(-150, -150) }) ));
That’s basically what the Tiger sample does, except that it gets its shapes from an SVG file.

You could certainly define your nodes by dynamically converting simple SVG if you want. But it would be more efficient to define them natively in GoJS.

As far as creating a pie chart for each node, you could certainly write some code to create each pie slice.

But what you really want is the ability to data-bind the node to an array of JavaScript objects holding only the important information: start angle, sweep angle, color, text. The basic functionality for doing this is already present in GoJS, but we still have some work to do so that you can create your pie charts that way.