An Oracle blog about Data Visualizations

  • October 17, 2014

Controlling Your Diagram Viewport

Duncan Mills

When you start to build your own diagrams you may be wondering how to control the "initial" view of the diagram inside of the component.  By default, the initial view that you see will be sized correctly to see the entirety of the diagram - all nodes will be visible.  However, what if you need more control? Well there are two approaches you can take, the first a simple declarative approach and the second which involves your layout code. 

Looking at the simple approach first.  If you look at the diagramNodes component you will see a property called centerRowKey. This property can be set to an EL expression which needs to evaluate to the rowKey of the node that you want to center on - typically you can use this in combination with node selection (see: Guide to Diagram Part 11- Selected Node Information) to allow a user to re-focus the diagram to the clicked node.  

 Need More Control?

Now centerRowKey is perfectly suitable for most situations, however, what if you need more control?  An example of this might be where you want to start the view of the diagram off in a zoomed state - just focusing on a particular subset of nodes for example. 

Fortunately there are a  couple of JavaScript APIs that you can call from your layout code that come in handy here. 

  1. The getComponentSize() function on the layoutContext.  This returns a DvtDiagramRectangle object which encodes the base width and the height of the diagram component. Note, however, that the logical size of the diagram may be smaller / different from this depending on it's shape relative to the  component
  2. The setViewport( DvtDiagramRectangle) function, also on the layoutContext.

 Both of these use DvtDiagramRectangle which is an object with the properties .x,.y,.w and .h, you can hopefully guess what each of those properties holds! A new DvyDiagramRectangle object can be created using the code:

var vp = new DvtDiagramRectangle(xpos, ypos,  width, height) 

For the task in hand, the setViewport() function is what we are interested in. You can think of it as drawing a scaled rectangle over the entirety of the diagram. If you proportionally reduce the size of the viewport then that will zoom in on the diagram. So you use the width and height attributes of the DvtDiagramRectangle that you pass to control the scaling, and then the x and y position to place the zoomed viewport relative to the base diagram. 

For example - lets say I want to zoom into the centre of a diagram that is defined as  a rectangle diagRect, I would use:

layoutContext.setViewport(new DvtDiagramRectangle((diagRec.w/4),

Alternatively the following would apply the same zoom level but show the top left hand quadrant of the diagram:

layoutContext.setViewport(new DvtDiagramRectangle((diagRec.w/2),

The one thing to watch out for here is not to assume that the  rectangle returned by getComponentSize is actually the size of your diagram, it is not.  It provides the basic size in pixels of the physical diagram component.  The diagram (nodes and links) itself is sized based on your layout and then scaled to provide a best fit in the available space in that physical component. Accordingly if you want to set the viewport, it pays to keep track of how wide and high your diagram actually grows to as you add nodes and links.  You can then work out the scaling factor that will have to be used to "fit" that into the physical component and then you will have the information that you need to manipulate the view port.

Join the discussion

Comments ( 1 )
  • guest Thursday, January 8, 2015

    Nice Post !!

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.