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'
));