Relation map

The RelalationMap component is a tool that can be used in association with a visualizer to display the hierarchical relationship between nodes: when a node is selected in the visualizer, the relation map shows its predecessors and its successors. Like the overview component, it can be customized either by using style properties or by creating a custom item renderer for nodes by implementing the IRelationMapItemRenderer interface.

The following example gives an idea about how to use the relation map component:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:visualizer="fr.kapit.visualizer.*"
			   xmlns:relationMap="fr.kapit.visualizer.tools.relationMap.*"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<fx:XML id="dp" xmlns="">
			<graphml>
				<node id="n1" name="Group1">	
					<graph id="n1">
						<node id="n2" name="Jack" age="45"/>	
						<node id="n3" name="Steeve" age="25"/>
						
					</graph>
				</node>
				<node id="n4" name="Ilyes" age="28"/>
				<node id="n5" name="Cyril" age="50"/>
				<edge id="e1" source="n5" target="n2"/>
				<edge id="e2" source="n2" target="n4"/>
				<edge id="e4" source="n5" target="n3"/>
			</graphml>
		</fx:XML>
	</fx:Declarations>
	<visualizer:Visualizer id="vis" width="100%" height="100%"
						   dataProvider="{dp}"
						   layout="hierarchicalCyclic"
						   groupLabelField="name"
						   nodeLabelFields="name"
						   />
	<s:Panel title="Relation map">
		<relationMap:RelationMap width="200" height="200" visualizer="{vis}" nodeLabelField="name"/>
	</s:Panel>
	
</s:Application>