Force Network
Draws a force-directed graph. Read more at d3-force-simulation.
Installing
npm i --save @ngx-dino/core @ngx-dino/force-network
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreModule } from '@ngx-dino/core';
import { ForceNetworkModule } from '@ngx-dino/force-network';
@NgModule({
...
imports: [CommonModule, CoreModule, ForceNetworkModule, ...]
...
})
Usage Example
<dino-force-network
[height]="height"
[width]="width"
[margin]="margin"
[nodeSizeField]="fields.nodeSizeField"
[nodeIdField]="fields.nodeIdField"
[nodeColorField]="fields.nodeColorField"
[nodeLabelField]="fields.nodeLabelField"
[linkIdField]="fields.edgeIdField"
[linkSourceField]="fields.edgeSourceField"
[linkTargetField]="fields.edgeTargetField"
[linkSizeField]="fields.edgeSizeField"
[nodeColorRange]="nodeColorRange"
[nodeSizeRange]="nodeSizeRange"
[enableTooltip]="enableTooltip"
[tooltipTextField]="fields.tooltipTextField"
[chargeStrength]="visChargeStrength"
[nodeStream]="nodeStream"
[linkStream]="edgeStream">
</dino-force-network>
API Summary
dino-force-network
Name | Type | Description |
---|---|---|
[nodeStream] |
Observable<RawChangeSet<any>> | Data stream of nodes |
[linkStream] |
Observable<RawChangeSet<any>> | Data stream of links |
[margin] |
Object | Margin values for the visualization container. Usage Format - { top: 20, right: 15, bottom: 60, left: 60 }
|
[width] |
number | Width of the visualization container |
[height] |
number | Height of the visualization container |
[nodeSizeField] |
BoundField<string> | Field encoding for size of nodes |
[nodeColorField] |
BoundField<string> | Field encoding for color of nodes |
[nodeIdField] |
BoundField<string> | Field encoding for ID of nodes |
[nodeLabelField] |
BoundField<string> | Field encoding for labels of nodes |
[labelSizeField] |
string | Field encoding for size of labels of nodes Not supported currently. |
[linkIdField] |
BoundField<string> | Field encoding for ID of links |
[linkSourceField] |
BoundField<string> | Field encoding for sources of links |
[linkTargetField] |
BoundField<string> | Field encoding for targets of links |
[linkSizeField] |
BoundField<number> | Field encoding for size/thickness of links |
[linkColorField] |
string | Field encoding for color of links |
[linkOpacityField] |
string | Field encoding for opacity of links |
[tooltipTextField] |
BoundField<number | string> | Field encoding for tooltip text |
[enableTooltip] |
boolean | Tooltip toggle |
[nodeSizeRange] |
number[] | Size range for nodes |
[labelSizeRange] |
number[] | Size range for labels |
[nodeColorRange] |
string[] | Color range for nodes |
[linkSizeRange] |
number[] | Size/thickness range for links |
[linkColorRange] |
string[] | Color range for links |
[linkOpacityRange] |
number[] | Opacity range for links |
[minPositionX] |
number | Not supported currently. |
[minPositionY] |
number | Not supported currently. |
[chargeStrength] |
number | Charge force between nodes in the force simulation. Read more at d3-force/manyBody_strength |
[linkDistance] |
number | Link distance parameter for the force-network simulation. Read more - "The link force pushes linked nodes together or apart according to the desired [link distance]"(https://github.com/d3/d3-force/blob/master/README.md#link_distance) |
Keywords
force-simulation, d3, angular, typescript, visualization