README

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

Usage no npm install needed!

README

Force Network

Installing

Usage Example

API Summary

dino-force-network

Keywords