Remarks
Simulates heat emitted by nodes or edges and can be used to visualize properties like load, throughput, risk or other metrics. Each node or edge may have a heat value between 0 and 1, where 0 means no heat and 1 means maximum heat. These heat values are spread around the items and the heat at a given point is visualized by a color defined by the gradient property.
Instances of this class should be inserted into the RenderTree with an instance of IGraph as render tag:
const heatMapRenderer = new HeatMapRenderer({
nodeHeatProvider: (node) => 1 /* return the heat value for the given node */,
edgeHeatProvider: (edge) => 1 /* return the heat value for the given edge */,
})
const renderTree = graphComponent.renderTree
renderTree.createElement(
renderTree.backgroundGroup,
graphComponent.graph,
heatMapRenderer,
)The render tag graph may differ from the GraphComponent's graph. If null is used as render tag, the HeatMapRender will automatically use the graph from the render context's CanvasControl, if it is an instance of GraphComponent.
Members
Constructors
Parameters
- nodeHeatProvider?: function(INode): number
- A function returning the heat values for nodes.A function providing heat values to the HeatMapRenderer class.Parameters
- item: INode
- The item to return the heat value for.
Return Value- number
- Must return a value between 0 (inclusive, no heat) and 1 (inclusive, maximum heat).
- edgeHeatProvider?: function(IEdge): number
- A function returning the heat values for edges.A function providing heat values to the HeatMapRenderer class.Parameters
- item: IEdge
- The item to return the heat value for.
Return Value- number
- Must return a value between 0 (inclusive, no heat) and 1 (inclusive, maximum heat).
Properties
Gets or sets the function that returns the heat values for edges.
The returned values must be between 0 (inclusive) and 1 (inclusive). A value of 0 means no heat and a value of 1 means maximum heat. The behavior for values outside this range is undefined.
This function is called once per edge and once per visual update and should therefore run efficiently. There should be no expensive calculations inside this function.
- item: IEdge
- The item to return the heat value for.
- number
- Must return a value between 0 (inclusive, no heat) and 1 (inclusive, maximum heat).
Gets or sets the color gradient for the heat values.
The stop offsets correspond to the heat values of items. A heat value of 0 will receive the color of the gradient at offset 0, and a heat value of 1 will receive the color of the gradient at offset 1. Values in between are interpolated accordingly between the stops. The colors of the gradient are interpolated in the OKLCH color space.
The default value is a rainbow gradient: blue - cyan - green - yellow - red.
Updating values inside the enumerable will have no effect. To change the gradient, assign a different IEnumerable instance to this property.
The gradient must contain at least one stop. The stops must be sorted by the GradientStop.offset value, ascending.
Gets or sets the function that returns the heat values for nodes.
The returned values must be between 0 (inclusive) and 1 (inclusive). A value of 0 means no heat and a value of 1 means maximum heat. The behavior for values outside this range is undefined.
This function is called once per node and once per visual update and should therefore run efficiently. There should be no expensive calculations inside this function.
- item: INode
- The item to return the heat value for.
- number
- Must return a value between 0 (inclusive, no heat) and 1 (inclusive, maximum heat).
Methods
Returns an implementation of IBoundsProvider that can determine the visible bounds of the rendering of the render tag.
Parameters
- renderTag: IGraph
- the render tag to query the bounds for
Return Value
- IBoundsProvider
- An implementation of IBoundsProvider to determine the bounds of the visualization.
Implements
IObjectRenderer.getBoundsProviderReturns an implementation of IHitTestable that can determine whether the rendering of the render tag has been hit at a given coordinate.
Parameters
- renderTag: IGraph
- the render tag to do the hit testing for
Return Value
- IHitTestable
- An implementation of IHitTestable to determine visibility.
Implements
IObjectRenderer.getHitTestableReturns an implementation of IVisibilityTestable that can determine if the rendering of the render tag would be visible in a given context.
Parameters
- renderTag: IGraph
- the render tag to query visibility for
Return Value
- IVisibilityTestable
- An implementation of IVisibilityTestable to determine visibility.
Implements
IObjectRenderer.getVisibilityTestableReturns an implementation of IVisualCreator that will create the Visual tree for the render tag.
Return Value
- IVisualCreator
- An implementation of IVisualCreator to create or update the visualization.