Type class
Creates a force-directed tree.
Click here for more info
Data item
ForceDirected uses data items of type IForceDirectedDataItem
.
Sources
ForceDirected can be used (imported) via one of the following packages.
// Import ForceDirected import * as am5hierarchy from "@amcharts/amcharts5/hierarchy"; // Create ForceDirected am5hierarchy.ForceDirected.new(root, { // ... config if applicable });
<!-- Load ForceDirected --> <script src="hierarchy.js"></script> <script> // Create ForceDirected am5hierarchy.ForceDirected.new(root, { // ... config if applicable }); </script>
Inheritance
ForceDirected extends LinkedHierarchy
.
ForceDirected is not extended by any other symbol.
Settings
Set these settings on a ForceDirected object using its set()
and setAll()
methods.
Read about settings concept.
active # |
Type Inherited from Indicates if element is currently active. |
---|---|
animationDuration # |
Type Inherited from Duration for all drill animations in milliseconds. |
animationEasing # |
Type Inherited from An easing function to use for drill animations. |
background # |
Type Inherited from Background element. Click here for more info |
blur # |
Type Inherited from Apply blur filter. Ranges of values in pixels: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
brightness # |
Type Inherited from Modifty visual brightness. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
calculateAggregates # |
Type Inherited from If set to Do not enable unless you are using such aggregate values in tooltips, display data fields, heat rules, or similar. |
categoryField # |
Type Inherited from A field in data that holds string-based identificator for node. |
centerStrength # |
Type Default A force that attracts (or pushes back) all nodes to the center of the chart. Click here for more info |
centerX # |
Type Inherited from X coordinate of the center of the element relative to itself. Center coordinates will affect placement as well as rotation pivot point. |
centerY # |
Type Inherited from Y coordinate of the center of the element relative to itself. Center coordinates will affect placement as well as rotation pivot point. |
childDataField # |
Type Inherited from A field in data that holds an array of child node data. |
colors # |
Type Inherited from A Click here for more info |
contrast # |
Type Inherited from Modify contrast. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
crisp # |
Type Default Inherited from If set to It will round x/y position so it is positioned fine "on pixel". It will also adjust NOTE: this is might not universally work, especially when set on several objects that are supposed to fit perfectly with each other. @since 5.3.0 |
cursorOverStyle # |
Type Inherited from A named mouse cursor style to show when hovering this element. Click here for more info |
customValueField # |
Type Inherited from A key to look up in data for a numeric customValue of the data item. Usually used for storing additional numeric information and heat rules. |
dateFormatter # |
Type Inherited from An instance of Click here for more info |
disabled # |
Type Inherited from Indicates if element is disabled. |
disabledField # |
Type Inherited from A field in data that holds boolean value indicating if node is disabled (collapsed). |
downDepth # |
Type Inherited from Number of child levels to open when clicking on a node. Click here for more info |
draggable # |
Type Inherited from If set to |
durationFormatter # |
Type Inherited from An instance of Click here for more info |
dx # |
Type Inherited from Horizontal shift in pixels. Can be negative to shift leftward. |
dy # |
Type Inherited from Vertical shift in pixels. Can be negative to shift upward. |
exportable # |
Type Inherited from If set to |
fill # |
Type Inherited from Series fill color. Click here for more info |
fillField # |
Type Inherited from A field in data that holds color used for fills for various elements, such as nodes. |
fillPattern # |
Type Inherited from Series fill pattern. Click here for more info |
forceHidden # |
Type Inherited from If set to |
forceInactive # |
Type Inherited from If set to @since 5.0.21 |
heatRules # |
Type Inherited from A list of heat rules to apply on series elements. Click here for more info |
height # |
Type Inherited from Element's absolute height in pixels (numeric value) or relative height to parent ( |
html # |
Type Inherited from HTML content of the container. Click here for more info |
hue # |
Type Inherited from Rotate HUE colors in degrees. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
id # |
Type Inherited from A custom string ID for the element. If set, element can be looked up via Will raise error if an element with the same ID already exists. |
idField # |
Type Inherited from A key to look up in data for an id of the data item. |
initialDepth # |
Type Inherited from Number of levels to show on chart's first load. Click here for more info |
initialFrames # |
Type Default Length of how long initial force simulation would run in frames. Click here for more info |
interactive # |
Type Inherited from Should this element accept user interaction events? |
interactiveChildren # |
Type Inherited from If set to |
interpolationDuration # |
Type Inherited from A duration of the animation from one setting value to another, in milliseconds. Click here for more info |
interpolationEasing # |
Type Inherited from Easing function to use for cross setting value animations. Click here for more info |
invert # |
Type Inherited from Invert colors. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
isMeasured # |
Type Inherited from If set to |
layer # |
Type Inherited from Numeric layer to put element in. Elements with higher number will appear in front of the ones with lower numer. If not set, will inherit layer from its ascendants. |
layerMargin # |
Type Inherited from Margins for the layer. Can be used to make the layer larger/or smaller than default chart size. @since @5.2.39 |
layout # |
Type Inherited from A method to layout Click here for more info |
legendDataItem # |
Type Inherited from A data item representing series in a @readonly |
legendLabelText # |
Type Inherited from A text template to be used for label in legend. |
legendValueText # |
Type Inherited from A text template to be used for value label in legend. |
linkWithField # |
Type Inherited from A field in data which holds IDs of nodes to link with. |
linkWithStrength # |
Type Default A force that attracts (or pushes back) nodes that are linked together via Click here for more info |
manyBodyStrength # |
Type Default A force that attracts (or pushes back) all nodes to each other. Click here for more info |
marginBottom # |
Type Inherited from Bottom margin in pixels. |
marginLeft # |
Type Inherited from Left margin in pixels. |
marginRight # |
Type Inherited from Right margin in pixels. |
marginTop # |
Type Inherited from Top margin in pixels. |
mask # |
Type Inherited from An element to use as a container's mask (clipping region). Click here for more info |
maskContent # |
Type Inherited from If set to |
maxHeight # |
Type Inherited from Maximum allowed height in pixels. |
maxRadius # |
Type Default Biggest possible radius for a node circle. Can be a fixed pixel value or percent relative to chart size. Click here for more info |
maxWidth # |
Type Inherited from Maximum allowed width in pixels. |
minHeight # |
Type Inherited from Minimum allowed height in pixels. |
minRadius # |
Type Default Smallest possible radius for a node circle. Can be a fixed pixel value or percent relative to chart size. Click here for more info |
minWidth # |
Type Inherited from Minimum allowed width in pixels. |
name # |
Type Inherited from Name of the series. |
nodePadding # |
Type Minimum gap in pixels between the nodes. |
numberFormatter # |
Type Inherited from An instance of Click here for more info |
opacity # |
Type Inherited from Opacity. 0 - fully transparent; 1 - fully opaque. |
paddingBottom # |
Type Inherited from Bottom padding in pixels. |
paddingLeft # |
Type Inherited from Left padding in pixels. |
paddingRight # |
Type Inherited from Right padding in pixels. |
paddingTop # |
Type Inherited from Top padding in pixels. |
patterns # |
Type Inherited from A Click here for more info |
position # |
Type Inherited from Positioning of the element. |
reverseChildren # |
Type Inherited from If set to @since 5.1.1 |
rotation # |
Type Inherited from Rotation in degrees. |
saturate # |
Type Inherited from Modify saturation. Range of values in pixels:
Click here for more info |
scale # |
Type Inherited from Scale. Setting to a value less than 1 will shrink object. |
selectedDataItem # |
Type Inherited from A data item for currently selected node. Click here for more info |
sepia # |
Type Inherited from Apply sepia filter. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
sequencedDelay # |
Type Inherited from A delay in milliseconds to wait before starting animation of next data item. Click here for more info |
sequencedInterpolation # |
Type Inherited from If set to Click here for more info |
setStateOnChildren # |
Type Inherited from If set to Click here for more info |
showOnFrame # |
Type Default If set to a number will wait X number of frames before revealing the tree. Can be used to hide initial animations where nodes settle into their places. Click here for more info |
showTooltipOn # |
Type Default Inherited from Defines when tooltip is shown over the element. Available options:
Click here for more info |
singleBranchOnly # |
Type Inherited from If set to |
sort # |
Type Default Inherited from How to sort nodes by their value. |
stateAnimationDuration # |
Type Inherited from Duration of transition from one state to another. |
stateAnimationEasing # |
Type Inherited from Easing of transition from one state to another. |
stroke # |
Type Inherited from Series stroke color. Click here for more info |
templateField # |
Type Inherited from Allows binding element's settings to data. Click here for more info |
themeTags # |
Type Inherited from Tags which can be used by the theme rules. Click here for more info |
themeTagsSelf # |
Type Inherited from Tags which can be used by the theme rules. These tags only apply to this object, not any children. Click here for more info |
themes # |
Type Inherited from A list of themes applied to the element. |
toggleKey # |
Type Inherited from If set, element will toggle specified boolean setting between |
tooltip # |
Type Inherited from
|
tooltipHTML # |
Type Inherited from HTML content to show in a tooltip when hovered. @since 5.2.11 |
tooltipPosition # |
Type Inherited from Tooltip position. |
tooltipText # |
Type Inherited from Text to show in a tooltip when hovered. |
tooltipX # |
Type Inherited from Tooltip pointer X coordinate relative to the element itself. |
tooltipY # |
Type Inherited from Tooltip pointer Y coordinate relative to the element itself. |
topDepth # |
Type Inherited from If set, will show nodes starting from set level. It could be used to eliminate top level branches, that do not need to be shown. Click here for more info |
upDepth # |
Type Inherited from Number of levels parent levels to show from currently selected node. Click here for more info |
userData # |
Type Inherited from A storage for any custom user data that needs to be associated with the element. |
valueField # |
Type Inherited from A field in data that holds numeric value for the node. |
velocityDecay # |
Type Default Resistance acting agains node speed. The greater the value, the more "sluggish" the nodes will be. Click here for more info |
verticalScrollbar # |
Type Inherited from Setting this to an instance of Click here for more info |
visible # |
Type Inherited from Is element visible? |
wheelable # |
Type Inherited from If set to |
width # |
Type Inherited from Element's absolute width in pixels (numeric value) or relative width to parent ( |
x # |
Type Inherited from X position relative to parent. |
xField # |
Type Field in data that holds X coordinate of the node. Click here for more info |
y # |
Type Inherited from Y position relative to parent. |
yField # |
Type Field in data that holds X coordinate of the node. Click here for more info |
There are 105 inherited items currently hidden from this list. |
Private settings
These are read-only settings accessible from a ForceDirected object using its getPrivate()
method.
Read about private settings.
adjustedStartIndex # |
Read only
Type Inherited from |
---|---|
baseValueSeries # |
Read only
Type Inherited from |
customValueAbsoluteSum # |
Read only
Type Inherited from |
customValueAverage # |
Read only
Type Inherited from |
customValueClose # |
Read only
Type Inherited from |
customValueCount # |
Read only
Type Inherited from |
customValueHigh # |
Read only
Type Inherited from |
customValueLow # |
Read only
Type Inherited from |
customValueOpen # |
Read only
Type Inherited from |
customValueSum # |
Read only
Type Inherited from |
endIndex # |
Read only
Type Inherited from |
focusable # |
Read only
Type Inherited from If set to @since 5.3.16 |
htmlElement # |
Read only
Type Inherited from A |
maxDepth # |
Read only
Type Inherited from Level count in series. |
showingTooltip # |
Read only
Type Inherited from Is element currently showing a tooltip? |
startIndex # |
Read only
Type Inherited from |
tooltipTarget # |
Read only
Type Inherited from An element tooltip should inherit its colors from. |
trustBounds # |
Read only
Type Inherited from If set to This helps to solve ghost tooltips problem that sometimes appear while moving the pointer over interactive objects. This is set to @since 5.5.0 |
valueAbsoluteSum # |
Read only
Type Inherited from |
valueAverage # |
Read only
Type Inherited from |
valueClose # |
Read only
Type Inherited from |
valueCount # |
Read only
Type Inherited from |
valueHigh # |
Read only
Type Inherited from |
valueLow # |
Read only
Type Inherited from |
valueOpen # |
Read only
Type Inherited from |
valueSum # |
Read only
Type Inherited from |
There are 26 inherited items currently hidden from this list. |
Properties
adapters # |
Type Default Inherited from |
---|---|
bullets # |
Type Default Inherited from List of bullets to use for the series. Click here for more info |
bulletsContainer # |
Type Default Inherited from A |
chart # |
Type Inherited from A chart series belongs to. |
children # |
Type Default Inherited from List of Container's child elements. |
circles # |
Type Default Inherited from A list of node circle elements in a |
className # |
Static
Type Default |
classNames # |
Static
Type Default |
data # |
Type Inherited from Component's data. Click here for more info |
dataItem # |
Type Inherited from A NOTE: data item is being assigned automatically in most cases where it matters. Use this accessor to set data item only if you know what you're doing. |
dataItems # |
Type Inherited from A list of component's data items. |
events # |
Inherited from |
inited # |
Type Default Inherited from Indicates if the component has already been initialized. |
labels # |
Type Default Inherited from A list of label elements in a |
linkBullets # |
Type Default Inherited from |
links # |
Type Default Inherited from A list of link elements in a |
linksContainer # |
Type Default Inherited from A |
nodes # |
Type Default Inherited from A list of nodes in a |
nodesContainer # |
Type Default Inherited from A |
outerCircles # |
Type Default Inherited from A list of node outer circle elements in a |
parent # |
Type Inherited from Parent |
root # |
Type Inherited from An instance of @readonly |
states # |
Type Default Inherited from |
template # |
Type Inherited from @todo needs description |
uid # |
Type Default Inherited from Unique ID. |
There are 23 inherited items currently hidden from this list. |
Methods
addBullet( dataItem: ) |
Returns Inherited from Adds bullet directly to a data item. Please note: method accepts You should add Bullet instance, not a method like you do it on series. Click here for more info |
---|---|
addChildData( dataItem: ) |
Returns Inherited from Adds children data to the target data item. Click here for more info |
allChildren() |
Returns Inherited from |
animate( options: ) |
Returns Inherited from Animates setting values from current/start values to new ones. Click here for more info |
appear( duration?: ) |
Returns Inherited from Plays initial reveal animation regardless if element is currently hidden or visible. |
areLinked( source: ) |
Returns Inherited from Returns |
compositeOpacity() |
Returns Inherited from Returns an actual opacity of the element, taking into account all parents. @since 5.2.11 |
compositeRotation() |
Returns Inherited from Returns an actual roation of the element, taking into account all parents. @since 5.9.2 |
compositeScale() |
Returns Inherited from Returns an actual scale of the element, taking into account all parents. @since 5.9.2 |
depth() |
Returns Inherited from Returns depth (how deep in the hierachy of the content tree) of this element. |
disableDataItem( dataItem: ) |
Returns Inherited from Disables a data item. |
dispose() |
Returns Inherited from Disposes this object. |
eachChildren( f: ( child: ) |
Returns Inherited from |
enableDataItem( dataItem: ) |
Returns Inherited from Enables a disabled data item. |
endIndex() |
Returns Inherited from |
get( key: ) |
Returns Inherited from Returns settings value for the specified If there is no value, Click here for more info |
getDataItemById( id: ) |
Returns Inherited from Looks up and returns a data item by its ID. |
getDateFormatter() |
Returns Inherited from Returns an instance of If this element does not have it set, global one form Click here for more info |
getDurationFormatter() |
Returns Inherited from Returns an instance of If this element does not have it set, global one form Click here for more info |
getNumberFormatter() |
Returns Inherited from Returns an instance of If this element does not have it set, global one form Click here for more info |
getTooltip() |
Returns Inherited from Returns |
has( key: ) |
Returns Inherited from Returns Click here for more info |
height() |
Returns Inherited from Returns height of this element in pixels. |
hide( duration?: ) |
Returns Inherited from Hides the element and returns a series.hide().then(function(ev) { console.log("Series finished hiding"); }) series.hide().then(function(ev) { console.log("Series finished hiding"); }) |
hideDataItem( dataItem: ) |
Returns Inherited from Hides hierarchy's data item. |
hideTooltip() |
Returns Inherited from Hides element's |
hover() |
Returns Inherited from Simulate hover over element. |
hoverDataItem( dataItem: ) |
Returns Inherited from Triggers hover on a series data item. @since 5.0.7 |
innerHeight() |
Returns Inherited from Returns container's inner height (height without padding) in pixels. |
innerWidth() |
Returns Inherited from Returns container's inner width (width without padding) in pixels. |
isDisposed() |
Returns Inherited from Returns |
isDragging() |
Returns Inherited from Returns |
isFocus() |
Returns Inherited from Returns |
isHidden() |
Returns Inherited from Returns |
isHiding() |
Returns Inherited from Returns |
isHover() |
Returns Inherited from Returns |
isShowing() |
Returns Inherited from Returns |
isType( type: ) |
Returns Inherited from Checks if element is of certain class (or inherits one). |
isVisible() |
Returns Inherited from Returns |
isVisibleDeep() |
Returns Inherited from Same as @since 5.2.7 |
linkDataItems( source: ) |
Returns Inherited from Link two data items with a link element. |
makeDataItem( data: ) |
Returns Inherited from Creates a new data item and processes it. |
markDirtyKey( key: ) |
Returns Inherited from Marks some setting as dirty. Could be used to trigger adapter. |
markDirtyValues( _dataItem?: ) |
Returns Inherited from Forces a repaint of the element which relies on data. @since 5.0.21 |
maxHeight() |
Returns Inherited from Returns maximum allowed height of this element in pixels. |
maxWidth() |
Returns Inherited from Returns maximum allowed width of this element in pixels. |
new( root: ) |
Static Returns Inherited from Use this method to create an instance of this class. Click here for more info |
off( key: ) |
Returns Inherited from Removes a callback for when value of a setting changes. Click here for more info |
offPrivate( key: ) |
Returns Inherited from Removes a callback for when value of a private setting changes. Click here for more info |
on( key: ) |
Returns Inherited from Sets a callback function to invoke when specific key of settings changes or is set. Click here for more info |
onPrivate( key: ) |
Returns Inherited from Sets a callback function to invoke when specific key of private settings changes or is set. Click here for more info |
pushDataItem( data: ) |
Returns Inherited from Adds new explicit data item to series. |
remove( key: ) |
Returns Inherited from Removes a setting value for the specified Click here for more info |
removeAll() |
Returns Inherited from Removes all keys; Click here for more info |
selectDataItem( dataItem: ) |
Returns Inherited from Select a data item. |
set( key: ) |
Returns Inherited from Sets a setting Click here for more info |
setAll( settings: ) |
Returns Inherited from Sets multiple settings at once. Click here for more info |
setTimeout( fn: () => ) |
Returns Inherited from Creates and returns a "disposable" timeout. |
show( duration?: ) |
Returns Inherited from Shows currently hidden element and returns a series.show().then(function(ev) { console.log("Series is now fully visible"); }) series.show().then(function(ev) { console.log("Series is now fully visible"); }) |
showDataItem( dataItem: ) |
Returns Inherited from Shows hierarchy's data item. |
showTooltip( point?: ) |
Returns Inherited from Shows element's |
startIndex() |
Returns Inherited from |
toBack() |
Returns Inherited from Moves sprite to the beginning of the parent's children array. Depending on |
toFront() |
Returns Inherited from Moves sprite to the end of the parent's children array. Depending on |
toGlobal( point: ) |
Returns Inherited from Converts X/Y coordinate within this element to a global coordinate. |
toLocal( point: ) |
Returns Inherited from Converts global X/Y coordinate to a coordinate within this element. |
unhover() |
Returns Inherited from Simulate unhover over element. |
unhoverDataItem( dataItem: ) |
Returns Inherited from Triggers un-hover on a series data item. @since 5.0.7 |
unlinkDataItems( source: ) |
Returns Inherited from Unlink two linked data items. |
width() |
Returns Inherited from Returns width of this element in pixels. |
x() |
Returns Inherited from Returns element's actual X position in pixels. |
y() |
Returns Inherited from Returns element's actual Y position in pixels. |
There are 72 inherited items currently hidden from this list. |
Events
Add event handlers to ForceDirected object using its events.on()
method.
Read about adding event handlers.
#blur |
Param { originalEvent: Inherited from Invoked when element loses focus. |
---|---|
#boundschanged |
Param { type: Inherited from Invoked when element's bounds change due to any manipulation to it. |
#click |
Param { type: Inherited from Invoked when element is clicked or tapped. |
#dataitemchanged |
Param { newDataItem: Inherited from Invoked when element's data item changes. |
#dataitemselected |
Param { dataItem: Inherited from |
#datavalidated |
Param { type: Inherited from |
#dblclick |
Param { type: Inherited from Invoked when element is doubleclicked or tapped twice quickly. |
#dragged |
Param { type: Inherited from Invoked when element ois being dragged. |
#dragstart |
Param { type: Inherited from Invoked when element dragging starts. |
#dragstop |
Param { type: Inherited from Invoked when element dragging stops. |
#focus |
Param { originalEvent: Inherited from Invoked when element gains focus. |
#globalpointermove |
Param { type: Inherited from Invoked when pointer is moving anywhere in the window, even outside of the element or even chart area. |
#globalpointerup |
Param { type: Inherited from Invoked when pointer button is released or touch stops in the window, even outside of the element or even chart area. |
#middleclick |
Param { type: Inherited from Invoked when element is clicked with the middle mouse button. |
#pointerdown |
Param { type: Inherited from Invoked when pointer button is pressed or touch starts over the element. |
#pointerout |
Param { type: Inherited from Invoked when pointer moves outside the element. |
#pointerover |
Param { type: Inherited from Invoked when pointer moves over the element. |
#pointerup |
Param { type: Inherited from Invoked when pointer button is released or touch stops over the element. |
#positionchanged |
Param { type: Inherited from Invoked when element's position (X/Y) changes. |
#rightclick |
Param { type: Inherited from Invoked when element is clicked width the right mouse button. |
#wheel |
Param { originalEvent: Inherited from Invoked when mouse wheel is spinned while pointer is over the element. |
There are 21 inherited items currently hidden from this list. |