2

Context

I am trying to convert a DGML graph into an SVG. I am using Javascript to read and parse the DGML Nodes and Links using Jquery. I created a DGML graph using Visual Studio 2017 (it has an interactive inbuilt editor). Essentially I need to create a mapping between the position of nodes on the DGML graph and a generated SVG. I have managed to make a conversion of every property of the nodes and links, except for a property called Bounds

<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="http://schemas.microsoft.com/vs/2009/dgml">
<Nodes>
<Node Id="Node1" Background="#FF000000" Bounds="289.142857142857,-914.285714285714,56.9200000000001,25.96" Label="node 1" UseManualLocation="True" />
<Node Id="Node2" Bounds="-99.1466388157435,-813.468571428572,56.9200000000001,25.96" Label="node 2" UseManualLocation="True" />
<Node Id="Node3" Bounds="165.353095238095,-821.948571428572,56.9200000000001,25.96" Label="node 3" UseManualLocation="True" />
<Node Id="Node4" Bounds="231.884895804269,-672.637129778181,56.92,25.96" Label="node 4" UseManualLocation="True" />
<Node Id="Node5" Bounds="126.293653230212,-514.368957318116,56.9200000000001,25.96" Label="node 5" UseManualLocation="True" />
<Node Id="Node6" Bounds="513.21231765747,-699.551714460973,56.9200000000001,25.96" Label="node 6" UseManualLocation="True" />
</Nodes>
<Links>
<Link Source="Node1" Target="Node2" Bounds="-33.5154810441621,-893.916239433358,322.658338187019,83.7763765262094" />
<Link Source="Node1" Target="Node3" Bounds="218.428553771979,-888.325714285714,81.7729515442388,60.9960031621974" />
<Link Source="Node2" Target="Node4" Bounds="-42.8686314368827,-788.653915128306,267.113829712029,113.638782142621" />
<Link Source="Node2" Target="Node5" Bounds="-60.9032254171191,-787.508586425781,200.456326731834,265.952512098603" />
<Link Source="Node3" Target="Node4" Bounds="199.596870550233,-795.988597412109,51.3011424145167,115.130629087374" />
<Link Source="Node4" Target="Node5" Bounds="168.40836594804,-646.677165527344,83.2767077301747,124.821483021298" />
<Link Source="Node4" Target="Node6" Bounds="288.80489440918,-682.991837277453,215.448314485295,20.6119078319973" />
<Link Source="Node6" Target="Node1" Bounds="337.645038336076,-882.098554229514,190.482965266866,182.54683792092" />
</Links>
<Properties>
<Property Id="Background" Label="Background" Description="The background color" DataType="System.Windows.Media.Brush" />
<Property Id="Bounds" DataType="System.Windows.Rect" />
<Property Id="Label" Label="Label" Description="Displayable label of an Annotatable object" DataType="System.String" />
<Property Id="UseManualLocation" DataType="System.Boolean" />
</Properties>
</DirectedGraph>

How the DGML looks like in Visual Studio

I saw in the Property tag for "Bounds" the datatype is System.Windows.Rect which has a constructor Rect(Double, Double, Double, Double) - Initializes a new instance of the Rect structure that has the specified x-coordinate, y-coordinate, width, and height.

https://msdn.microsoft.com/en-us/library/system.windows.rect(v=vs.110).aspx

Since all the nodes have the same size, it is not wrong to assume that the final two parameters are width and height.

Question

How is the graphics coordinate system of the DGML oriented? For instance, an SVG graphic starts like most CG coordinates, left top corner origin; positive X towards right, positive Y towards bottom. I could not find any information on this on the DGML reference

https://docs.microsoft.com/en-us/visualstudio/modeling/directed-graph-markup-language-dgml-reference

sohamangoes
  • 99
  • 6

2 Answers2

1

Looking at your diagram i think the Y axis is inverted (top-down) and X axis is classical (left-right). Start of coordinates is between Node2 and Node5 somewhere behind the bottom of diagram view.

Igor
  • 174
  • 9
0

My DgmlPowerTools provides a "Save as SVG" option under the "Share" toolbar item.

Chris
  • 532
  • 3
  • 8