Graphics Reference
In-Depth Information
labelLayer.map( 'text' ).from( 'name' );
//...
Highlight Flow through a Node
The final step in the construction of this example is to add the interactions
for highlighting flow through a node. Create three sets for tracking highlight
state: one for the focus node, one for its links, and one for linked nodes.
Define mapping filters that apply to members of each set. Finally, add event
handlers that add the node, its links, and linked nodes to the highlight sets
when hovering over a node, and clear them when leaving. After modifying
the sets, redraw the changed nodes and bring them to the front.
After adding the event callbacks, there is one last step to completing your
supply chain visualization: call the redraw function to draw it all. You are
now ready to try it.
//...
// define sets to track highlight state.
var focusNodes = new aperture.Set( 'id' );
var highlightedNodes = new aperture.Set( 'id' );
var highlightedLinks = new aperture.Set( 'id' );
// alter attributes when part of highlight sets
barLayer.map( 'fill' ).filter(focusNodes.constant( 'black' ));
linkLayer.map( 'opacity' ).filter(highlightedLinks.constant(1.0));
labelLayer.map( 'font-weight' ).filter(focusNodes.constant( 'bold' ));
labelLayer.map( 'font-outline' ).filter(focusNodes.constant
( '#F0EFE7' ));
// define three planes based on highlight state.
nodeLayer.map( 'plane' ).asValue( 'labeled' )
.filter(highlightedNodes.constant( 'highlight' ))
.filter(focusNodes.constant( 'focus' ));
Search WWH ::




Custom Search