diff --git a/CHANGELOG.md b/CHANGELOG.md index e54cd59c3..b2b0d046d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,29 @@ # Change Log +## [2.0.0-rc0](https://github.com/danielcaldas/react-d3-graph/tree/2.0.0-rc0) + +[Full Changelog](https://github.com/danielcaldas/react-d3-graph/compare/1.3.0...2.0.0-rc0) + +**Implemented enhancements:** + +* Directional links are placed on top of each other [\#89](https://github.com/danielcaldas/react-d3-graph/issues/89) + +**Fixed bugs:** + +* Error re-rendering Graph when no `config` prop is set [\#81](https://github.com/danielcaldas/react-d3-graph/issues/81) + +**Merged pull requests:** + +* Configurable graph force strength and link length [\#104](https://github.com/danielcaldas/react-d3-graph/pull/104) ([LonelyPrincess](https://github.com/LonelyPrincess)) +* Fix alert message of onClickNode function in README [\#100](https://github.com/danielcaldas/react-d3-graph/pull/100) ([LucienBouletRoblin](https://github.com/LucienBouletRoblin)) +* Fix/dependencies update [\#95](https://github.com/danielcaldas/react-d3-graph/pull/95) ([danielcaldas](https://github.com/danielcaldas)) +* Feature/bump dependencies [\#92](https://github.com/danielcaldas/react-d3-graph/pull/92) ([danielcaldas](https://github.com/danielcaldas)) +* Feature/bend links [\#91](https://github.com/danielcaldas/react-d3-graph/pull/91) ([danielcaldas](https://github.com/danielcaldas)) +* Small improvement in utils/pick [\#87](https://github.com/danielcaldas/react-d3-graph/pull/87) ([danielcaldas](https://github.com/danielcaldas)) +* fix: Graph fails to render without config prop [\#84](https://github.com/danielcaldas/react-d3-graph/pull/84) ([LonelyPrincess](https://github.com/LonelyPrincess)) +* Node Collapse [\#83](https://github.com/danielcaldas/react-d3-graph/pull/83) ([svipatov](https://github.com/svipatov)) +* Added overflow:hidden to container graph area [\#82](https://github.com/danielcaldas/react-d3-graph/pull/82) ([svipatov](https://github.com/svipatov)) + ## [1.3.0](https://github.com/danielcaldas/react-d3-graph/tree/1.3.0) (2018-06-25) **NOTE**: This release contains only PR [\#79](https://github.com/danielcaldas/react-d3-graph/pull/79) cherry picked from master. diff --git a/docs/0.3.0.html b/docs/0.3.0.html index 6e3ad3187..2ae9eabf7 100644 --- a/docs/0.3.0.html +++ b/docs/0.3.0.html @@ -21,7 +21,8 @@
(boolean
= false
)
🚅🚅🚅 when true performing a node drag and drop should automatically
-rearrange all nodes positions based on new position of dragged node (note:
+rearrange all nodes positions based on new position of dragged node (note:
staticGraph
should be false).
(number
@@ -525,76 +526,76 @@ Graph global configurations
the height of the (svg) area where the graph will be rendered.
(boolean
= false
)
🚅🚅🚅 when user mouse hovers a node that node and adjacent common
-connections will be highlighted (depending on the
+connections will be highlighted (depending on the
highlightDegree
- value). All the remaining nodes and links assume opacity value equal to
+ value). All the remaining nodes and links assume opacity value equal to
highlightOpacity
.
(boolean
= false
)
🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
-to
+to
nodeHighlightBehavior
- but for links
+ but for links
-(just for historical reference this property was introduced in
+(just for historical reference this property was introduced in
v1.0.0
)
.
(number
= 1
)
Possible values: 0, 1 or 2
. This value represents the range of the
-highlight behavior when some node is highlighted. If the value is set to
+highlight behavior when some node is highlighted. If the value is set to
0
only the selected node will be
-highlighted. If the value is set to
+highlighted. If the value is set to
1
the selected node and his 1st degree connections will be highlighted. If
-the value is set to
+the value is set to
2
the selected node will be highlighted as well as the 1st and 2nd common degree connections.
(number
= 1
)
this value is used to highlight nodes in the network. The lower
-the value the more the less highlighted nodes will be visible (related to
+the value the more the less highlighted nodes will be visible (related to
nodeHighlightBehavior
).
(number
@@ -602,9 +603,9 @@ Graph global configurations
max zoom that can be performed against the graph.
(number
@@ -612,37 +613,37 @@ Graph global configurations
min zoom that can be performed against the graph.
(boolean
= false
)
when setting this value to true the graph will be completely static, thus
all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
-rendered with the initial provided
+rendered with the initial provided
x and y coordinates
(links positions will be automatically set
from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
(number
@@ -652,9 +653,9 @@ Graph global configurations
node.color string
-
+
(default '#d3d3d3' )
|
- 🔍🔍🔍 this is the color that will be applied to the node if no + | 🔍🔍🔍 this is the color that will be applied to the node if no color property -is found inside the node itself (yes +is found inside the node itself (yes you can pass a property 'color' inside the node and that color will override the this default one ). |
node.fontColor string
-
+
(default 'black' )
|
- 🔍🔍🔍 fill color for node's + | 🔍🔍🔍 fill color for node's
|
node.fontSize number
-
+
(default 10 )
|
font-size
@@ -712,10 +713,10 @@ Node level configurationsproperty for all nodes' labels. |
|
node.fontWeight string
-
+
(default 'normal' )
|
font-weight
@@ -723,69 +724,69 @@ Node level configurationsproperty for all nodes' labels. |
|
node.highlightColor string
-
+
(default 'SAME' )
|
color for all highlighted nodes (use string 'SAME' if you want the node to keep its color in highlighted state). | |
node.highlightFontSize number
-
+
(default 8 )
|
fontSize in highlighted state. | |
node.highlightFontWeight string
-
+
(default 'normal' )
|
fontWeight in highlighted state. | |
node.highlightStrokeColor string
-
+
(default 'SAME' )
|
strokeColor in highlighted state. | |
node.highlightStrokeWidth number
-
+
(default 1.5 )
|
strokeWidth in highlighted state. | |
node.labelProperty string
-
+
(default 'id' )
|
this is the node property that will be used in runtime to fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set -node.labelProperty to be +node.labelProperty to be 'firstName' . | |
node.mouseCursor string
-
+
(default 'pointer' )
|
cursor
@@ -793,59 +794,59 @@ Node level configurationsproperty for when some node is mouse hovered. |
|
node.opacity number
-
+
(default 1 )
|
by default all nodes will have this opacity value. | |
node.renderLabel boolean
-
+
(default true )
|
when set to false no labels will appear along side nodes in the graph. | |
node.size number
-
+
(default 200 )
|
🔍🔍🔍 defines the size of all nodes. | |
node.strokeColor string
-
+
(default 'none' )
|
color for the stroke of each node. | |
node.strokeWidth number
-
+
(default 1.5 )
|
the width of the all node strokes. | |
node.svg string
-
+
(default '' )
|
- 🔍🔍🔍 render custom svg for nodes in alternative to + | 🔍🔍🔍 render custom svg for nodes in alternative to
node.symbolType
. This svg can
be provided as a string to either a remote svg resource or for a local one.
@@ -856,18 +857,18 @@ Node level configurations |
node.symbolType string
-
+
(default 'circle' )
|
- 🔍🔍🔍 the + | 🔍🔍🔍 the
shape
of the node.
-Use the following values under a property
+Use the following values under a property
type
inside each node (nodes may have different types, same as colors):
Node level configurations |
link.color string
-
+
(default '#d3d3d3' )
|
the color for links. |
link.opacity number
-
+
(default 1 )
|
the default opacity value for links. |
link.semanticStrokeWidth boolean
-
+
(default false )
|
when set to true all links will have
@@ -941,10 +942,10 @@ Link level configurationsstrokeWidth += (linkValue * strokeWidth) / 10; |
link.strokeWidth number
-
+
(default 1.5 )
|
strokeWidth for all links. By default the actual value is obtain by the
@@ -952,34 +953,34 @@ Link level configurationslink.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
|
link.highlightColor string
-
+
(default '#d3d3d3' )
|
links' color in highlight state. |
// A simple config that uses some properties
const myConfig = {
nodeHighlightBehavior: true,
@@ -994,60 +995,60 @@ Link level configurations
};
// Sorry for the long config description, here's a potato 🥔.
-
-
-
-
-
+
+
+
+
+
Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
Type: Object
- - - - - - - - - - + + + + + + + + + +(string)
: the id of the node.
-
+
(string?)
: color of the node (optional).
-
+
(string?)
: node text label font color (optional).
-
+
(string?)
: size of the node (optional).
-
+
(string?)
: symbol type of the node (optional).
-
+
(string?)
: custom svg for node (optional).
-
+
Create d3 forceSimulation to be applied on the graph.
d3-force#forceSimulation
@@ -1233,67 +1234,67 @@
(number)
the width of the container area of the graph.
(number)
the height of the container area of the graph.
Object
:
returns the simulation instance to be consumed.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
(Object)
the node object for whom we will generate properties.
number
:
the opacity value for the given node.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Receives a matrix of the graph with the links source and target as concrete node instances and it transforms it in a lightweight matrix containing only links with source and target being strings representative of some node id @@ -1413,59 +1414,59 @@
Object<string, Object>
:
an object containing a matrix of connections of the graph, for each nodeId,
there is an object that maps adjacent nodes ids (string) and their values (number).
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Method that initialize graph nodes provided by rd3g consumer and adds additional default mandatory properties that are optional for the user. Also it generates an index mapping, this maps nodes ids the their index in the array @@ -1484,59 +1485,59 @@
Object<string, Object>
:
returns the nodes ready to be used within rd3g with additional properties such as x, y
and highlighted values.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Some integrity validations on links and nodes structure. If some validation fails the function will throw an error.
- - - - - - - - - + + + + + + + + +undefined
:
-
-
-
-
-
+
+
+
+
+
Build some Link properties based on given parameters.
(string)
the id of the source node (from).
(string)
the id of the target node (to).
(number)
value that indicates the amount of zoom transformation.
Object
:
returns an object that aggregates all props for creating respective Link component instance.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Build some Node properties based on given parameters.
(Object)
the node object for whom we will generate properties.
(number)
value that indicates the amount of zoom transformation.
Object
:
returns object that contain Link props ready to be feeded to the Link component.
-
-
-
-
-
-
-
-
-Encapsulates common procedures to initialize graph.
- - - - - - - - - + + + + + + + + +(Object)
Graph component props, object that holds data, id and config.
props.data Object
|
- Data object holds links (array of + | Data object holds links (array of Link -) and nodes (array of +) and nodes (array of Node ). |
props.id string
|
the graph id. | |
props.config Object
|
- same as + | same as config in buildGraph . |
(Object)
Graph component current state (same format as returned object on this function).
Object
:
a fully (re)initialized graph state object.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
This function updates the highlighted value for a given node and also updates highlight props.
(string)
identifier of node to update.
(string
@@ -2087,39 +2088,39 @@
new highlight value for given node.
Object
:
returns an object containing the updated nodes
and the id of the highlighted node.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Build Link components for a given node.
(string)
the id of the node to whom Link components will be generated.
(number)
value that indicates the amount of zoom transformation.
Array<Object>
:
returns the generated array of Link components.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Method that actually is exported an consumed by Graph component in order to build all Nodes and Link components.
(string)
this value contains a string that represents the some currently highlighted node.
(Object)
this object contains a source and target property for a link that is highlighted at some point in time.
highlightedLink.source string
|
id of source node for highlighted link. |
highlightedLink.target string
|
id of target node for highlighted link. |
(number)
value that indicates the amount of zoom transformation.
Object
:
returns an object containing the generated nodes and links that form the graph. The result is
-returned in a way that can be consumed by es6
+returned in a way that can be consumed by es6
destructuring assignment
.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Some methods that help no the process of rendering a node.
Converts a string that specifies a symbol into a concrete instance
of d3 symbol.
@@ -2523,60 +2524,60 @@
(string)
- the string that specifies the symbol type (should be one of
+ the string that specifies the symbol type (should be one of
node.symbolType
).
Object
:
concrete instance of d3 symbol (defaults to circle).
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Build a d3 svg symbol based on passed symbol and symbol type.
- - - - - - - - - + + + + + + + + +(number
@@ -2614,75 +2615,75 @@
the size of the symbol.
(string
= 'circle'
)
the string containing the type of symbol that we want to build
-(should be one of
+(should be one of
node.symbolType
).
Object
:
concrete instance of d3 symbol.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Graph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional). @@ -2691,48 +2692,48 @@
Extends - + React.Component - +
- - - - - - - - + + + + + + + +(any)
-
+
import { Graph } from 'react-d3-graph';
// graph payload (with minimalist structure)
@@ -2797,15 +2798,15 @@
onMouseOutNode={onMouseOutNode}
onMouseOverLink={onMouseOverLink}
onMouseOutLink={onMouseOutLink}/>
-
-
-
-
+
+
+
+
Handles d3 drag 'end' event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handles d3 'drag' event. more about d3 drag
(Object)
if not undefined it will contain event data.
(number)
index of the node that is being dragged.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handles d3 drag 'start' event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Sets nodes and links highlighted value.
(string)
the id of the node to highlight.
(boolean
@@ -3102,38 +3103,38 @@
the highlight value to be set (true or false).
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
The tick function simply calls React set state in order to update component and render nodes along time as d3 calculates new node positioning.
(Object)
new state to pass on.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Configures zoom upon graph with default or user provided values.
https://github.com/d3/d3-zoom#zoom
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handler for 'zoom' event within zoom config.
Object
:
returns the transformed elements within the svg graph area.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Handles mouse out node event.
Handles mouse over link event.
(string)
id of the source node that participates in the event.
(string)
id of the target node that participates in the event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handles mouse out link event.
(string)
id of the source node that participates in the event.
(string)
id of the target node that participates in the event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Calls d3 simulation.stop().
https://github.com/d3/d3-force#simulation_stop
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
This method resets all nodes fixed positions by deleting the properties fx (fixed x) and fy (fixed y). Following this, a simulation is triggered in order to force nodes to go back @@ -3675,44 +3676,44 @@
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Calls d3 simulation.restart().
https://github.com/d3/d3-force#simulation_restart
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Offers a series of methods that isolate render logic for Graph component.
Node component is responsible for encapsulating node render.
Extends - + React.Component - +
- - - - - - - - - - - - + + + + + + + + + + + +const onClickNode = function(nodeId) {
window.alert('Clicked node', nodeId);
};
@@ -3904,15 +3905,15 @@
onClickNode={onClickNode}
onMouseOverNode={onMouseOverNode}
onMouseOutNode={onMouseOutNode} />
-
-
-
-
+
+
+
+
Handle click on the node.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handle mouse over node event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handle mouse out node event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Link component is responsible for encapsulating link render.
Extends - + React.Component - +
- - - - - - - - - - - - + + + + + + + + + + + +const onClickLink = function(source, target) {
window.alert(`Clicked link between ${source} and ${target}`);
};
@@ -4157,15 +4158,15 @@
onClickLink={onClickLink}
onMouseOverLink={onMouseOverLink}
onMouseOutLink={onMouseOutLink} />
-
-
-
-
+
+
+
+
Handle mouse over link event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handle mouse out link event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Offers a series of generic methods for object manipulation, and other operations that are common across rd3g such as error logging.
Checks whether a certain object property is from object type and is a non empty object.
- - - - - - - - - + + + + + + + + +boolean
:
returns true if o
@@ -4443,24 +4444,24 @@ Generic deep comparison between javascript simple or complex objects.
- - - - - - - - - + + + + + + + + +(Object)
one of the objects to be compared.
(Object)
second object to compare with first.
(number
@@ -4516,38 +4517,38 @@
this parameter serves only for internal usage.
boolean
:
returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Checks whether or not a certain object is empty. NOTE: If the passed parameter is not an object the method return false.
- - - - - - - - - + + + + + + + + +(Object)
object whom emptiness we want to check.
boolean
:
true if the given object is n ft and object and is empty.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
This function merges two objects o1 and o2, where o2 properties override existent o1 properties, and if o2 doesn't posses some o1 property the fallback will be the o1 property.
- - - - - - - - - + + + + + + + + +(Object
@@ -4655,9 +4656,9 @@
object.
(Object
@@ -4665,9 +4666,9 @@
object that will override o1 properties.
(int
@@ -4675,39 +4676,39 @@
the depth at which we are merging the object.
Object
:
object that is the result of merging o1 and o2, being o2 properties priority overriding
existent o1 properties.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Create new object from the inputted one only with the props passed in the props list.
- - - - - - - - - + + + + + + + + +(Object)
the object to pick props from.
Object
:
the object resultant from the picking operation.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Helper function for customized error logging.
- - - - - - - - - + + + + + + + + +(string)
the name of the component where the error is to be thrown.
(string)
the message contain a more detailed explanation about the error.
Error
:
the thrown error.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
1.3.0
Note about performance
+Some of the properties have a major performance impact when toggled while rendering graphs of medium or large dimensions (hundreds or thousand of elements).
+These properties are marked with 🚅🚅🚅.
+⭐ tip to achieve smoother interactions you may want to provide a toggle to set staticGraph to true
+
+Note about granularity
+Some of the properties listed in the Node section are marked with 🔍🔍🔍. This means that this properties
+have a higher level of granularity. These properties can be defined in the graph payload at a node level. (sample payload below)
const graph = {
+ nodes: [
+ {
+ id: 'id',
+ color: 'red', // only this node will be red
+ size: 300, // only this node will have size 300
+ symbolType: 'diamond' // only this node will have 'diamond' shape
+ }
+ ],
+ links: [...]
+};
+(boolean
+ = false
)
+ 🚅🚅🚅 when true performing a node drag and drop should automatically
+rearrange all nodes positions based on new position of dragged node (note:
+staticGraph
+ should be false).
+
+ (number
+ = 400
)
+ the height of the (svg) area where the graph will be rendered.
+
+ (boolean
+ = false
)
+ 🚅🚅🚅 when user mouse hovers a node that node and adjacent common
+connections will be highlighted (depending on the
+highlightDegree
+ value). All the remaining nodes and links assume opacity value equal to
+highlightOpacity
+.
+
+ (boolean
+ = false
)
+ 🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
+to
+nodeHighlightBehavior
+ but for links
+
+(just for historical reference this property was introduced in
+v1.0.0
+)
+
+.
+
+ (number
+ = 1
)
+ Possible values: 0, 1 or 2
+. This value represents the range of the
+highlight behavior when some node is highlighted. If the value is set to
+0
+ only the selected node will be
+highlighted. If the value is set to
+1
+ the selected node and his 1st degree connections will be highlighted. If
+the value is set to
+2
+ the selected node will be highlighted as well as the 1st and 2nd common degree connections.
+
+ (number
+ = 1
)
+ this value is used to highlight nodes in the network. The lower
+the value the more the less highlighted nodes will be visible (related to
+nodeHighlightBehavior
+).
+
+ (number
+ = 8
)
+ max zoom that can be performed against the graph.
+
+ (number
+ = 0.1
)
+ min zoom that can be performed against the graph.
+
+ (boolean
+ = false
)
+ when setting this value to true the graph will be completely static, thus
+all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
+rendered with the initial provided
+x and y coordinates
+ (links positions will be automatically set
+from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
+
+ Name | +Description | +
---|---|
node.color string
+
+ (default '#d3d3d3' )
+ |
+ 🔍🔍🔍 this is the color that will be applied to the node if no +color property + +is found inside the node itself (yes +you can pass a property 'color' inside the node and that color will override the +this default one +). + | +
node.fontColor string
+
+ (default 'black' )
+ |
+ 🔍🔍🔍 fill color for node's
+ |
+
node.fontSize number
+
+ (default 10 )
+ |
+ font-size + +property for all nodes' labels. + | +
node.fontWeight string
+
+ (default 'normal' )
+ |
+ font-weight + +property for all nodes' labels. + | +
node.highlightColor string
+
+ (default 'SAME' )
+ |
+ color for all highlighted nodes (use string 'SAME' if you +want the node to keep its color in highlighted state). + | +
node.highlightFontSize number
+
+ (default 8 )
+ |
+ fontSize in highlighted state. + | +
node.highlightFontWeight string
+
+ (default 'normal' )
+ |
+ fontWeight in highlighted state. + | +
node.highlightStrokeColor string
+
+ (default 'SAME' )
+ |
+ strokeColor in highlighted state. + | +
node.highlightStrokeWidth number
+
+ (default 1.5 )
+ |
+ strokeWidth in highlighted state. + | +
node.labelProperty string
+
+ (default 'id' )
+ |
+ this is the node property that will be used in runtime to +fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set +node.labelProperty to be +'firstName' +. + | +
node.mouseCursor string
+
+ (default 'pointer' )
+ |
+ cursor + +property for when some node is mouse hovered. + | +
node.opacity number
+
+ (default 1 )
+ |
+ by default all nodes will have this opacity value. + | +
node.renderLabel boolean
+
+ (default true )
+ |
+ when set to false no labels will appear along side nodes in the +graph. + | +
node.size number
+
+ (default 200 )
+ |
+ 🔍🔍🔍 defines the size of all nodes. + | +
node.strokeColor string
+
+ (default 'none' )
+ |
+ color for the stroke of each node. + | +
node.strokeWidth number
+
+ (default 1.5 )
+ |
+ the width of the all node strokes. + | +
node.svg string
+
+ (default '' )
+ |
+ 🔍🔍🔍 render custom svg for nodes in alternative to
+node.symbolType
+. This svg can
+be provided as a string to either a remote svg resource or for a local one.
+
+ + + + + |
+
node.symbolType string
+
+ (default 'circle' )
+ |
+ 🔍🔍🔍 the
+
+shape
+
+ of the node.
+Use the following values under a property
+type
+ inside each node (nodes may have different types, same as colors):
+
[note] react-d3-graph will map this values to d3 symbols
+ |
+
Name | +Description | +
---|---|
link.color string
+
+ (default '#d3d3d3' )
+ |
+ 🚅🚅🚅 the color for links (from version 1.3.0 this property can be configured at link level). + | +
link.opacity number
+
+ (default 1 )
+ |
+ the default opacity value for links. + | +
link.semanticStrokeWidth boolean
+
+ (default false )
+ |
+ when set to true all links will have
+
+"semantic width"
+, this means that the width of the connections will be proportional to the value of each link.
+This is how link strokeWidth will be calculated:
+strokeWidth += (linkValue * strokeWidth) / 10;+ |
+
link.strokeWidth number
+
+ (default 1.5 )
+ |
+ strokeWidth for all links. By default the actual value is obtain by the
+following expression:
+link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
+ |
+
link.highlightColor string
+
+ (default '#d3d3d3' )
+ |
+ links' color in highlight state. + | +
// A simple config that uses some properties
+const myConfig = {
+ nodeHighlightBehavior: true,
+ node: {
+ color: 'lightgreen',
+ size: 120,
+ highlightStrokeColor: 'blue'
+ },
+ link: {
+ highlightColor: 'lightblue'
+ }
+};
+
+// Sorry for the long config description, here's a potato 🥔.
+
+
+
+
+
+
+
+
+Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
+ + ++ Type: + Object +
+ + + + + + + + + + + + + +(string)
+ : the id of the node.
+
+
+ (string?)
+ : color of the node (optional).
+
+
+ (string?)
+ : node text label font color (optional).
+
+
+ (string?)
+ : size of the node (optional).
+
+
+ (string?)
+ : symbol type of the node (optional).
+
+
+ (string?)
+ : custom svg for node (optional).
+
+
+ Create d3 forceSimulation to be applied on the graph.
+d3-force#forceSimulation
+d3-force#simulation_force
+Wtf is a force? here
(number)
+ the width of the container area of the graph.
+
+ (number)
+ the height of the container area of the graph.
+
+ Object
:
+ returns the simulation instance to be consumed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
+ + +(Object)
+ the node object for whom we will generate properties.
+
+ number
:
+ the opacity value for the given node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Receives a matrix of the graph with the links source and target as concrete node instances and it transforms it +in a lightweight matrix containing only links with source and target being strings representative of some node id +and the respective link value (if non existent will default to 1).
+ + + + + + + + + + + + + + +Object<string, Object>
:
+ an object containing a matrix of connections of the graph, for each nodeId,
+there is an object that maps adjacent nodes ids (string) and their values (number).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Method that initialize graph nodes provided by rd3g consumer and adds additional default mandatory properties +that are optional for the user. Also it generates an index mapping, this maps nodes ids the their index in the array +of nodes. This is needed because d3 callbacks such as node click and link click return the index of the node.
+ + + + + + + + + + + + + + +Object<string, Object>
:
+ returns the nodes ready to be used within rd3g with additional properties such as x, y
+and highlighted values.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Some integrity validations on links and nodes structure. If some validation fails the function will +throw an error.
+ + + + + + + + + + + + + + +undefined
:
+
+
+
+
+
+
+
+ Build some Link properties based on given parameters.
+ + +(Object)
+ the link object for which we will generate properties.
+
+ (number)
+ value that indicates the amount of zoom transformation.
+
+ Object
:
+ returns an object that aggregates all props for creating respective Link component instance.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Build some Node properties based on given parameters.
+ + +(Object)
+ the node object for whom we will generate properties.
+
+ (number)
+ value that indicates the amount of zoom transformation.
+
+ Object
:
+ returns object that contain Link props ready to be feeded to the Link component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Encapsulates common procedures to initialize graph.
+ + + + + + + + + + + + + + +(Object)
+ Graph component props, object that holds data, id and config.
+
+ Name | +Description | +
---|---|
props.data Object
+ |
+ Data object holds links (array of +Link +) and nodes (array of +Node +). + | +
props.id string
+ |
+ the graph id. + | +
props.config Object
+ |
+ same as +config in buildGraph +. + | +
(Object)
+ Graph component current state (same format as returned object on this function).
+
+ Object
:
+ a fully (re)initialized graph state object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This function updates the highlighted value for a given node and also updates highlight props.
+ + +(string)
+ identifier of node to update.
+
+ (string
+ = false
)
+ new highlight value for given node.
+
+ Object
:
+ returns an object containing the updated nodes
+and the id of the highlighted node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Build Link components given a list of links.
+ + +(number)
+ value that indicates the amount of zoom transformation.
+
+ Array<Object>
:
+ returns the generated array of Link components.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Function that builds Node components.
+ + +(string)
+ this value contains a string that represents the some currently highlighted node.
+
+ (Object)
+ this object contains a source and target property for a link that is highlighted at some point in time.
+
+ Name | +Description | +
---|---|
highlightedLink.source string
+ |
+ id of source node for highlighted link. + | +
highlightedLink.target string
+ |
+ id of target node for highlighted link. + | +
(number)
+ value that indicates the amount of zoom transformation.
+
+ Object
:
+ returns the generated array of nodes components
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Method that actually is exported an consumed by Graph component in order to build all Nodes and Link +components.
+ + +(Object<string, Object>)
+ an object containing a matrix of connections of the graph, for each nodeId,
+there is an Object that maps adjacent nodes ids (string) and their values (number).
+ // links example
+ {
+ "Androsynth": {
+ "Chenjesu": 1,
+ "Ilwrath": 1,
+ "Mycon": 1,
+ "Spathi": 1,
+ "Umgah": 1,
+ "VUX": 1,
+ "Guardian": 1
+ },
+ "Chenjesu": {
+ "Androsynth": 1,
+ "Mycon": 1,
+ "Spathi": 1,
+ "Umgah": 1,
+ "VUX": 1,
+ "Broodhmome": 1
+ },
+ ...
+ }
+
+ (string)
+ this value contains a string that represents the some currently highlighted node.
+
+ (Object)
+ this object contains a source and target property for a link that is highlighted at some point in time.
+
+ Name | +Description | +
---|---|
highlightedLink.source string
+ |
+ id of source node for highlighted link. + | +
highlightedLink.target string
+ |
+ id of target node for highlighted link. + | +
(number)
+ value that indicates the amount of zoom transformation.
+
+ Object
:
+ returns an object containing the generated nodes and links that form the graph. The result is
+returned in a way that can be consumed by es6
+destructuring assignment
+.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Some methods that help no the process of rendering a node.
+ + +Converts a string that specifies a symbol into a concrete instance
+of d3 symbol.
+https://github.com/d3/d3-shape/blob/master/README.md#symbol
(string)
+ the string that specifies the symbol type (should be one of
+node.symbolType
+).
+
+ Object
:
+ concrete instance of d3 symbol (defaults to circle).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Build a d3 svg symbol based on passed symbol and symbol type.
+ + + + + + + + + + + + + + +(number
+ = 80
)
+ the size of the symbol.
+
+ (string
+ = 'circle'
)
+ the string containing the type of symbol that we want to build
+(should be one of
+node.symbolType
+).
+
+ Object
:
+ concrete instance of d3 symbol.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Graph component is the main component for react-d3-graph components, its interface allows its user +to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional). +The code for the live example +can be consulted here
+ + ++ Extends + + React.Component + +
+ + + + + + + + + + +(any)
+
+ import { Graph } from 'react-d3-graph';
+
+// graph payload (with minimalist structure)
+const data = {
+ nodes: [
+ {id: 'Harry'},
+ {id: 'Sally'},
+ {id: 'Alice'}
+ ],
+ links: [
+ {source: 'Harry', target: 'Sally'},
+ {source: 'Harry', target: 'Alice'},
+ ]
+};
+
+// the graph configuration, you only need to pass down properties
+// that you want to override, otherwise default ones will be used
+const myConfig = {
+ nodeHighlightBehavior: true,
+ node: {
+ color: 'lightgreen',
+ size: 120,
+ highlightStrokeColor: 'blue'
+ },
+ link: {
+ highlightColor: 'lightblue'
+ }
+};
+
+// graph event callbacks
+const onClickNode = function(nodeId) {
+ window.alert('Clicked node ${nodeId}');
+};
+
+const onMouseOverNode = function(nodeId) {
+ window.alert(`Mouse over node ${nodeId}`);
+};
+
+const onMouseOutNode = function(nodeId) {
+ window.alert(`Mouse out node ${nodeId}`);
+};
+
+const onClickLink = function(source, target) {
+ window.alert(`Clicked link between ${source} and ${target}`);
+};
+
+const onMouseOverLink = function(source, target) {
+ window.alert(`Mouse over in link between ${source} and ${target}`);
+};
+
+const onMouseOutLink = function(source, target) {
+ window.alert(`Mouse out link between ${source} and ${target}`);
+};
+
+<Graph
+ id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
+ data={data}
+ config={myConfig}
+ onClickNode={onClickNode}
+ onClickLink={onClickLink}
+ onMouseOverNode={onMouseOverNode}
+ onMouseOutNode={onMouseOutNode}
+ onMouseOverLink={onMouseOverLink}
+ onMouseOutLink={onMouseOutLink}/>
+
+
+
+
+
+
+ Handles d3 drag 'end' event.
+ + +undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handles d3 'drag' event. +more about d3 drag
+ + +(Object)
+ if not undefined it will contain event data.
+
+ (number)
+ index of the node that is being dragged.
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handles d3 drag 'start' event.
+ + +undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Sets nodes and links highlighted value.
+ + +(string)
+ the id of the node to highlight.
+
+ (boolean
+ = false
)
+ the highlight value to be set (true or false).
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The tick function simply calls React set state in order to update component and render nodes +along time as d3 calculates new node positioning.
+ + +(Object)
+ new state to pass on.
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Configures zoom upon graph with default or user provided values.
+https://github.com/d3/d3-zoom#zoom
undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handler for 'zoom' event within zoom config.
+ + +Object
:
+ returns the transformed elements within the svg graph area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handles mouse over link event.
+ + +(string)
+ id of the source node that participates in the event.
+
+ (string)
+ id of the target node that participates in the event.
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handles mouse out link event.
+ + +(string)
+ id of the source node that participates in the event.
+
+ (string)
+ id of the target node that participates in the event.
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Calls d3 simulation.stop().
+https://github.com/d3/d3-force#simulation_stop
undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This method resets all nodes fixed positions by deleting the properties fx (fixed x) +and fy (fixed y). Following this, a simulation is triggered in order to force nodes to go back +to their original positions (or at least new positions according to the d3 force parameters).
+ + +undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Calls d3 simulation.restart().
+https://github.com/d3/d3-force#simulation_restart
undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Offers a series of methods that isolate render logic for Graph component.
+ + +Node component is responsible for encapsulating node render.
+ + ++ Extends + + React.Component + +
+ + + + + + + + + + + + + + + + + + +const onClickNode = function(nodeId) {
+ window.alert('Clicked node', nodeId);
+};
+
+const onMouseOverNode = function(nodeId) {
+ window.alert('Mouse over node', nodeId);
+};
+
+const onMouseOutNode = function(nodeId) {
+ window.alert('Mouse out node', nodeId);
+};
+
+<Node
+ id='nodeId'
+ cx=22
+ cy=22
+ fill='green'
+ fontSize=10
+ fontColor='black'
+ fontWeight='normal'
+ dx=90
+ label='label text'
+ opacity=1
+ renderLabel=true
+ size=200
+ stroke='none'
+ strokeWidth=1.5
+ svg='assets/my-svg.svg'
+ type='square'
+ className='node'
+ onClickNode={onClickNode}
+ onMouseOverNode={onMouseOverNode}
+ onMouseOutNode={onMouseOutNode} />
+
+
+
+
+
+
+ Handle click on the node.
+ + +undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Link component is responsible for encapsulating link render.
+ + ++ Extends + + React.Component + +
+ + + + + + + + + + + + + + + + + + +const onClickLink = function(source, target) {
+ window.alert(`Clicked link between ${source} and ${target}`);
+};
+
+const onMouseOverLink = function(source, target) {
+ window.alert(`Mouse over in link between ${source} and ${target}`);
+};
+
+const onMouseOutLink = function(source, target) {
+ window.alert(`Mouse out link between ${source} and ${target}`);
+};
+
+<Link
+ source='idSourceNode'
+ target='idTargetNode'
+ x1=22
+ y1=22
+ x2=22
+ y2=22
+ strokeWidth=1.5
+ stroke='green'
+ className='link'
+ opacity=1
+ onClickLink={onClickLink}
+ onMouseOverLink={onMouseOverLink}
+ onMouseOutLink={onMouseOutLink} />
+
+
+
+
+
+
+ Handle link click event.
+ + +undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Offers a series of generic methods for object manipulation, and other operations +that are common across rd3g such as error logging.
+ + +Checks whether a certain object property is from object type and is a non empty object.
+ + + + + + + + + + + + + + +boolean
:
+ returns true if o
+[
+k
+]
+ is an non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Generic deep comparison between javascript simple or complex objects.
+ + + + + + + + + + + + + + +(Object)
+ one of the objects to be compared.
+
+ (Object)
+ second object to compare with first.
+
+ (number
+ = 0
)
+ this parameter serves only for internal usage.
+
+ boolean
:
+ returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Checks whether or not a certain object is empty. +NOTE: If the passed parameter is not an object the method return false.
+ + + + + + + + + + + + + + +(Object)
+ object whom emptiness we want to check.
+
+ boolean
:
+ true if the given object is n ft and object and is empty.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This function merges two objects o1 and o2, where o2 properties override existent o1 properties, and +if o2 doesn't posses some o1 property the fallback will be the o1 property.
+ + + + + + + + + + + + + + +(Object
+ = {}
)
+ object.
+
+ (Object
+ = {}
)
+ object that will override o1 properties.
+
+ (int
+ = 0
)
+ the depth at which we are merging the object.
+
+ Object
:
+ object that is the result of merging o1 and o2, being o2 properties priority overriding
+existent o1 properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Create new object from the inputted one only with the props passed +in the props list.
+ + + + + + + + + + + + + + +(Object)
+ the object to pick props from.
+
+ Object
:
+ the object resultant from the picking operation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Helper function for customized error logging.
+ + + + + + + + + + + + + + +(string)
+ the name of the component where the error is to be thrown.
+
+ (string)
+ the message contain a more detailed explanation about the error.
+
+ Error
:
+ the thrown error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+1.3.0
2.0.0-rc0
const graph = {
nodes: [
@@ -493,37 +494,61 @@
],
links: [...]
};
-Index for config
(boolean
= false
)
🚅🚅🚅 when true performing a node drag and drop should automatically
-rearrange all nodes positions based on new position of dragged node (note:
+rearrange all nodes positions based on new position of dragged node (note:
staticGraph
should be false).
(boolean
+ = false
)
+ 🚅🚅🚅 Allow leaf neighbours nodes to be collapsed (folded), this will allow users to clear the way out and focus on the parts of the graph that really matter.
+To see an example of this behavior you can access this sandbox link that has a specific set up to experiment this feature.
+
+(number
@@ -531,76 +556,76 @@ Graph global configurations
the height of the (svg) area where the graph will be rendered.
(boolean
= false
)
🚅🚅🚅 when user mouse hovers a node that node and adjacent common
-connections will be highlighted (depending on the
+connections will be highlighted (depending on the
highlightDegree
- value). All the remaining nodes and links assume opacity value equal to
+ value). All the remaining nodes and links assume opacity value equal to
highlightOpacity
.
(boolean
= false
)
🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
-to
+to
nodeHighlightBehavior
- but for links
+ but for links
-(just for historical reference this property was introduced in
+(just for historical reference this property was introduced in
v1.0.0
)
.
(number
= 1
)
Possible values: 0, 1 or 2
. This value represents the range of the
-highlight behavior when some node is highlighted. If the value is set to
+highlight behavior when some node is highlighted. If the value is set to
0
only the selected node will be
-highlighted. If the value is set to
+highlighted. If the value is set to
1
the selected node and his 1st degree connections will be highlighted. If
-the value is set to
+the value is set to
2
the selected node will be highlighted as well as the 1st and 2nd common degree connections.
(number
= 1
)
this value is used to highlight nodes in the network. The lower
-the value the more the less highlighted nodes will be visible (related to
+the value the more the less highlighted nodes will be visible (related to
nodeHighlightBehavior
).
(number
@@ -608,9 +633,9 @@ Graph global configurations
max zoom that can be performed against the graph.
(number
@@ -618,37 +643,37 @@ Graph global configurations
min zoom that can be performed against the graph.
(boolean
= false
)
when setting this value to true the graph will be completely static, thus
all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
-rendered with the initial provided
+rendered with the initial provided
x and y coordinates
(links positions will be automatically set
from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
(number
@@ -658,17 +683,17 @@ Graph global configurations
(Object)
- node object is explained in next section. ⬇️
-(Object)
+ d3 object is explained in next section. ⬇️
+node.color string
-
- (default '#d3d3d3' )
- |
- 🔍🔍🔍 this is the color that will be applied to the node if no -color property -is found inside the node itself (yes -you can pass a property 'color' inside the node and that color will override the -this default one -). - | -||
node.fontColor string
-
- (default 'black' )
- |
- 🔍🔍🔍 fill color for node's
- |
- ||
node.fontSize number
-
- (default 10 )
- |
- font-size + | d3.alphaTarget number
-property for all nodes' labels.
+ (default 0.05 )
+ |
+ see d3-force simulation.alphaTarget | -
node.fontWeight string
-
- (default 'normal' )
- |
- font-weight + | ||
node.highlightColor string
-
- (default 'SAME' )
- |
- color for all highlighted nodes (use string 'SAME' if you -want the node to keep its color in highlighted state). - | -||
node.highlightFontSize number
-
- (default 8 )
- |
- fontSize in highlighted state. - | -||
node.highlightFontWeight string
-
- (default 'normal' )
- |
- fontWeight in highlighted state. - | -||
node.highlightStrokeColor string
-
- (default 'SAME' )
- |
- strokeColor in highlighted state. - | -||
node.highlightStrokeWidth number
-
- (default 1.5 )
- |
- strokeWidth in highlighted state. - | -||
node.labelProperty string
-
- (default 'id' )
- |
- this is the node property that will be used in runtime to -fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set -node.labelProperty to be -'firstName' -. - | -||
node.mouseCursor string
-
- (default 'pointer' )
- |
- cursor -property for when some node is mouse hovered. - | -||
node.opacity number
-
- (default 1 )
- |
- by default all nodes will have this opacity value. - | -||
node.renderLabel boolean
-
- (default true )
- |
- when set to false no labels will appear along side nodes in the -graph. - | -||
node.size number
-
- (default 200 )
- |
- 🔍🔍🔍 defines the size of all nodes. - | -||
node.strokeColor string
-
- (default 'none' )
- |
- color for the stroke of each node. + | d3.gravity number
+
+ (default -100 )
+ |
+ this will define how close nodes are to each other (
+see d3 reference for forces
+).
+
|
-
node.strokeWidth number
-
- (default 1.5 )
- |
- the width of the all node strokes. + | d3.linkLength number
+
+ (default 100 )
+ |
+ the length of each link from the center of the nodes it joins. | -
node.svg string
-
- (default '' )
- |
- 🔍🔍🔍 render custom svg for nodes in alternative to -node.symbolType -. This svg can -be provided as a string to either a remote svg resource or for a local one. + | ||
node.symbolType string
-
- (default 'circle' )
- |
- 🔍🔍🔍 the
-
-shape
-
- of the node.
-Use the following values under a property
-type
- inside each node (nodes may have different types, same as colors):
-
[note] react-d3-graph will map this values to d3 symbols
- | d3.linkStrength number
+
+ (default 1 )
+ |
+ see d3-force link.strength
+
+
+ |
-
(Object)
- link object is explained in the next section. ⬇️
-(Object)
+ node object is explained in next section. ⬇️
+link.color string
-
- (default '#d3d3d3' )
- |
- 🚅🚅🚅 the color for links (from version 1.3.0 this property can be configured at link level). + | node.color string
+
+ (default '#d3d3d3' )
+ |
+ 🔍🔍🔍 this is the color that will be applied to the node if no +color property + +is found inside the node itself (yes +you can pass a property 'color' inside the node and that color will override the +this default one +). | -
link.opacity number
-
- (default 1 )
- |
- the default opacity value for links. + | node.fontColor string
+
+ (default 'black' )
+ |
+ 🔍🔍🔍 fill color for node's
+ |
-
link.semanticStrokeWidth boolean
-
- (default false )
- |
- when set to true all links will have + | node.fontSize number
-"semantic width"
-, this means that the width of the connections will be proportional to the value of each link.
-This is how link strokeWidth will be calculated:
-strokeWidth += (linkValue * strokeWidth) / 10;+ (default 10 )
+ |
+ font-size + +property for all nodes' labels. | -
link.strokeWidth number
-
- (default 1.5 )
- |
- strokeWidth for all links. By default the actual value is obtain by the
-following expression:
-link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
+ | node.fontWeight string
+
+ (default 'normal' )
+ |
+ font-weight + +property for all nodes' labels. | -
link.highlightColor string
-
- (default '#d3d3d3' )
- |
- links' color in highlight state. - | -
string
-
+ (default 'SAME'
)
+ // A simple config that uses some properties
-const myConfig = {
- nodeHighlightBehavior: true,
- node: {
- color: 'lightgreen',
- size: 120,
- highlightStrokeColor: 'blue'
- },
- link: {
- highlightColor: 'lightblue'
- }
-};
+
+ node.highlightFontSize number
-// Sorry for the long config description, here's a potato 🥔.
-
-
+ (default 8
)
+
+ fontSize in highlighted state.
+
+
-
-
-
-
string
-
-
-
- 'normal'
)
+ Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
+string
- 'SAME'
)
+ number
-
+ (default 1.5
)
+ string
-
+ (default 'id'
)
+ - Type: - Object -
- - - - - - - - +string
-
+ (default 'pointer'
)
+ (string)
- : the node id of the source in the link.
+property for when some node is mouse hovered.
+(string)
- : the node id of the target in the link.
-
- number
-
+ (default 1
)
+ boolean
-
-
+ (default true
)
+ number
- - Type: - Object -
- - + (default200
)
+ (string)
- : the id of the node.
+ string
-
-
-
- (string?)
- : node text label font color (optional).
-
- (string?)
- : size of the node (optional).
-
- string
-
+ (default ''
)
+ Create d3 forceSimulation to be applied on the graph.
-d3-force#forceSimulation
-d3-force#simulation_force
-Wtf is a force? here
string
+ (default 'circle'
)
+ [note] react-d3-graph will map this values to d3 symbols
+
(number)
- the width of the container area of the graph.
+
+
- Name | +Description | +
---|---|
link.color string
-
-
-
+ (default '#d3d3d3' )
+ |
+ 🚅🚅🚅 the color for links +(from version 1.3.0 this property can be configured at link level). + | +
link.opacity number
-
+ (default 1 )
+ |
+ the default opacity value for links. + | +
link.semanticStrokeWidth boolean
- Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node. + (defaultfalse )
+ |
+ when set to true all links will have
+"semantic width"
+, this means that the width of the connections will be proportional to the value of each link.
+This is how link strokeWidth will be calculated:
+strokeWidth += (linkValue * strokeWidth) / 10;+ |
+
link.highlightColor string
-
+ (default '#d3d3d3' )
+ |
+ links' color in highlight state. + | +
link.type string
-
+ (default 'STRAIGHT' )
+ |
+ the type of line to draw, available types at this point are:
+
|
+
Receives a matrix of the graph with the links source and target as concrete node instances and it transforms it -in a lightweight matrix containing only links with source and target being strings representative of some node id -and the respective link value (if non existent will default to 1).
- - - - - - - - - - -Object<string, Object>
:
- an object containing a matrix of connections of the graph, for each nodeId,
-there is an object that maps adjacent nodes ids (string) and their values (number).
-
-
-
+ // A simple config that uses some properties
+const myConfig = {
+ nodeHighlightBehavior: true,
+ node: {
+ color: 'lightgreen',
+ size: 120,
+ highlightStrokeColor: 'blue'
+ },
+ link: {
+ highlightColor: 'lightblue'
+ }
+};
+
+// Sorry for the long config description, here's a potato 🥔.
+
+
+
-
-
-
-
-
- Method that initialize graph nodes provided by rd3g consumer and adds additional default mandatory properties -that are optional for the user. Also it generates an index mapping, this maps nodes ids the their index in the array -of nodes. This is needed because d3 callbacks such as node click and link click return the index of the node.
+Object<string, Object>
:
- returns the nodes ready to be used within rd3g with additional properties such as x, y
-and highlighted values.
-
-
-
+ Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
- - +Some integrity validations on links and nodes structure. If some validation fails the function will -throw an error.
- - - - - - - - - - -undefined
:
-
-
-
-
-
- Build some Link properties based on given parameters.
-+ Type: + Object +
+ + + + + + + + + + + + + +(Object<string, Object>)
- same as
-nodes in buildGraph
-.
+ color (string?)
+ : color of the node (optional).
+
- (Object<string, Object>)
- same as
-links in buildGraph
-.
+ fontColor (string?)
+ : node text label font color (optional).
+
- (Object)
- same as
-config in buildGraph
-.
+ size (string?)
+ : size of the node (optional).
+
- (Array<Function>)
- same as
-linkCallbacks in buildGraph
-.
+ symbolType (string?)
+ : symbol type of the node (optional).
+
- (string)
- same as
-highlightedNode in buildGraph
-.
+ svg (string?)
+ : custom svg for node (optional).
+
- (number)
- value that indicates the amount of zoom transformation.
- Object
:
- returns an object that aggregates all props for creating respective Link component instance.
-
-
-
-
-
-
-
-
+
+
+
+
+
Build some Node properties based on given parameters.
-+ Type: + Object +
- -(Object)
- the node object for whom we will generate properties.
- (number)
- value that indicates the amount of zoom transformation.
- Object
:
- returns object that contain Link props ready to be feeded to the Link component.
-
-
-
-
-
-
+ (string)
+ : the node id of the source in the link.
-
-
- (string)
+ : the node id of the target in the link.
- Encapsulates common procedures to initialize graph.
+(Object)
- Graph component props, object that holds data, id and config.
- Name | -Description | -
---|---|
props.data Object
- |
- Data object holds links (array of -Link -) and nodes (array of -Node -). - | -
props.id string
- |
- the graph id. - | -
props.config Object
- |
- same as -config in buildGraph -. - | -
(Object)
- Graph component current state (same format as returned object on this function).
- Object
:
- a fully (re)initialized graph state object.
-
-
-
-
-
-
-
-
This function updates the highlighted value for a given node and also updates highlight props.
+ +Create d3 forceSimulation to be applied on the graph.
+d3-force#forceSimulation
+d3-force#simulation_force
+Wtf is a force? here
Object
:
- returns an object containing the updated nodes
-and the id of the highlighted node.
+ returns the simulation instance to be consumed.
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Build Link components given a list of links.
+ +Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
+ + +(Object<string, Object>)
- same as
-nodes in buildGraph
-.
+ node (Object)
+ the node object for whom we will generate properties.
(Array<Object>)
- array of links
-Link
+ highlightedNode (string)
+ same as
+highlightedNode in buildGraph
.
(Array<Object>)
- array of links
-Link
+ highlightedLink (Object)
+ same as
+highlightedLink in buildGraph
.
(number)
- value that indicates the amount of zoom transformation.
- Array<Object>
:
- returns the generated array of Link components.
+ number
:
+ the opacity value for the given node.
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Function that builds Node components.
+ +Receives a matrix of the graph with the links source and target as concrete node instances and it transforms it +in a lightweight matrix containing only links with source and target being strings representative of some node id +and the respective link value (if non existent will default to 1).
+ + + + + + + + + + -(string)
- this value contains a string that represents the some currently highlighted node.
- (Object)
- this object contains a source and target property for a link that is highlighted at some point in time.
+ Name | -Description | -
---|---|
highlightedLink.source string
- |
- id of source node for highlighted link. - | -
highlightedLink.target string
- |
- id of target node for highlighted link. - | -
(number)
- value that indicates the amount of zoom transformation.
- Object
:
- returns the generated array of nodes components
+ Object<string, Object>
:
+ an object containing a matrix of connections of the graph, for each nodeId,
+there is an object that maps adjacent nodes ids (string) and their values (number).
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Method that actually is exported an consumed by Graph component in order to build all Nodes and Link -components.
+ +Method that initialize graph nodes provided by rd3g consumer and adds additional default mandatory properties +that are optional for the user. Also it generates an index mapping, this maps nodes ids the their index in the array +of nodes. This is needed because d3 callbacks such as node click and link click return the index of the node.
+ + + + + + + + + + -Some integrity validations on links and nodes structure. If some validation fails the function will +throw an error.
+ + + + + + + + + + + + + + +(Array<Object>)
- array of links
-Link
+ data (Object)
+ Same as
+data in initializeGraphState
.
(Object<string, Object>)
- an object containing a matrix of connections of the graph, for each nodeId,
-there is an Object that maps adjacent nodes ids (string) and their values (number).
- // links example
- {
- "Androsynth": {
- "Chenjesu": 1,
- "Ilwrath": 1,
- "Mycon": 1,
- "Spathi": 1,
- "Umgah": 1,
- "VUX": 1,
- "Guardian": 1
- },
- "Chenjesu": {
- "Androsynth": 1,
- "Mycon": 1,
- "Spathi": 1,
- "Umgah": 1,
- "VUX": 1,
- "Broodhmome": 1
- },
- ...
- }
- undefined
:
+
+
+
+
+
+
+
+ Build some Link properties based on given parameters.
+ + +(Object)
+ the link object for which we will generate properties.
+
+ (Object)
- an object containing rd3g consumer defined configurations
-config
- for the graph.
+ same as
+config in buildGraph
+.
+
+ (string)
- this value contains a string that represents the some currently highlighted node.
+ same as
+highlightedNode in buildGraph
+.
(Object)
- this object contains a source and target property for a link that is highlighted at some point in time.
+ same as
+highlightedLink in buildGraph
+.
Name | -Description | -
---|---|
highlightedLink.source string
- |
- id of source node for highlighted link. - | -
highlightedLink.target string
- |
- id of target node for highlighted link. - | -
(number)
+ value that indicates the amount of zoom transformation.
+
+ Object
:
+ returns an object that aggregates all props for creating respective Link component instance.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Build some Node properties based on given parameters.
+ + +(Object)
+ the node object for whom we will generate properties.
+
+ (number)
+ value that indicates the amount of zoom transformation.
+
+ Object
:
+ returns object that contain Link props ready to be feeded to the Link component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Encapsulates common procedures to initialize graph.
+ + + + + + + + + + + + + + +(Object)
+ Graph component props, object that holds data, id and config.
+
+ Name | +Description | +
---|---|
props.data Object
+ |
+ Data object holds links (array of +Link +) and nodes (array of +Node +). + | +
props.id string
+ |
+ the graph id. + | +
props.config Object
+ |
+ same as +config in buildGraph +. + | +
(Object)
+ Graph component current state (same format as returned object on this function).
+
+ Object
:
+ a fully (re)initialized graph state object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This function updates the highlighted value for a given node and also updates highlight props.
+ + +(string)
+ identifier of node to update.
+
+ (string
+ = false
)
+ new highlight value for given node.
+
+ Object
:
+ returns an object containing the updated nodes
+and the id of the highlighted node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This function disconnects all the connections from leaf -> parent.
+ + +(string)
+ The id of the node from which to disconnect the leaf nodes
+
+ (Array)
+ An array containing all the d3 links.
+
+ Object<string, number>
:
+ Contains the new links and d3Links.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This function toggles the value for a given node connection (1 -> 0 and vice-versa).
+ + +(string)
+ The id of the node which to toggle
+
+ Object<string, number>
:
+ Contains the new connections with the target node toggled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Based on a starting node (ID) and all the current connections between all the nodes. +Find the leaf node connections of that starting node.
+ + +(string)
+ The id of the node where the "search" should be started.
+
+ Object<string, number>
:
+ Contains the connections to leaf nodes based on the given starting node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Given a node and the connections matrix, give the cardinality of the node.
+i.e.: Taking into account the node is connected to nothing, it amounts to 0. +Being connected to three nodes, it amounts to 3.
+ + + + + + + + + + + + + + +(string)
+ The id of the node to get the cardinality of
+
+ number
:
+ Contains the cardinality of the asked node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+A set of constants that facilitate readability regarding links.
+ + +A set of helper methods to manipulate/create links.
+ + +Computes radius for a smooth curve effect.
+ + + + + + + + + + + + + + +(number)
+ x value for point 1
+
+ (number)
+ y value for point 1
+
+ (number)
+ y value for point 2
+
+ (number)
+ y value for point 2
+
+ number
:
+ value of radius.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Get a strategy to compute line radius.
+CURVE_SMOOTH type inspired by mbostock - Mobile Patent Suits.
(string)
+ type of curve to get radius strategy from.
+
+ Function
:
+ a function that calculates a radius
+to match curve type expectation. Fallback is the straight line.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This method returns the path definition for a given link base on the line type +and the link source and target. +d attribute mdn
+ + + + + + + + + + + + + + +(Object)
+ the link to build the path definition
+
+ Name | +Description | +
---|---|
link.source Object
+
+ (default {} )
+ |
+ link source + | +
link.target Object
+
+ (default {} )
+ |
+ link target + | +
(string
+ = LINE_TYPES.STRAIGHT
)
+ the link line type
+
+ string
:
+ the path definition for the requested link
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Some methods that help no the process of rendering a node.
+ + +Converts a string that specifies a symbol into a concrete instance
+of d3 symbol.
+https://github.com/d3/d3-shape/blob/master/README.md#symbol
(string)
+ the string that specifies the symbol type (should be one of
+node.symbolType
+).
+
+ Object
:
+ concrete instance of d3 symbol (defaults to circle).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Build a d3 svg symbol based on passed symbol and symbol type.
+ + + + + + + + + + + + + + +(number
+ = 80
)
+ the size of the symbol.
+
+ (string
+ = 'circle'
)
+ the string containing the type of symbol that we want to build
+(should be one of
+node.symbolType
+).
+
+ Object
:
+ concrete instance of d3 symbol.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Graph component is the main component for react-d3-graph components, its interface allows its user +to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional). +The code for the live example +can be consulted here
+ + ++ Extends + + React.Component + +
+ + + + + + + + + + +(any)
+
+ import { Graph } from 'react-d3-graph';
+
+// graph payload (with minimalist structure)
+const data = {
+ nodes: [
+ {id: 'Harry'},
+ {id: 'Sally'},
+ {id: 'Alice'}
+ ],
+ links: [
+ {source: 'Harry', target: 'Sally'},
+ {source: 'Harry', target: 'Alice'},
+ ]
+};
+
+// the graph configuration, you only need to pass down properties
+// that you want to override, otherwise default ones will be used
+const myConfig = {
+ nodeHighlightBehavior: true,
+ node: {
+ color: 'lightgreen',
+ size: 120,
+ highlightStrokeColor: 'blue'
+ },
+ link: {
+ highlightColor: 'lightblue'
+ }
+};
+
+// graph event callbacks
+const onClickNode = function(nodeId) {
+ window.alert('Clicked node ${nodeId}');
+};
+
+const onMouseOverNode = function(nodeId) {
+ window.alert(`Mouse over node ${nodeId}`);
+};
+
+const onMouseOutNode = function(nodeId) {
+ window.alert(`Mouse out node ${nodeId}`);
+};
+
+const onClickLink = function(source, target) {
+ window.alert(`Clicked link between ${source} and ${target}`);
+};
+
+const onMouseOverLink = function(source, target) {
+ window.alert(`Mouse over in link between ${source} and ${target}`);
+};
+
+const onMouseOutLink = function(source, target) {
+ window.alert(`Mouse out link between ${source} and ${target}`);
+};
+
+<Graph
+ id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
+ data={data}
+ config={myConfig}
+ onClickNode={onClickNode}
+ onClickLink={onClickLink}
+ onMouseOverNode={onMouseOverNode}
+ onMouseOutNode={onMouseOutNode}
+ onMouseOverLink={onMouseOverLink}
+ onMouseOutLink={onMouseOutLink}/>
+
+
+
+
+
+
+ Handles d3 drag 'end' event.
+ + +undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handles d3 'drag' event. +more about d3 drag
+ + +(Object)
+ if not undefined it will contain event data.
+
+ (number)
+ index of the node that is being dragged.
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handles d3 drag 'start' event.
+ + +undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Sets nodes and links highlighted value.
+ + +(string)
+ the id of the node to highlight.
+
+ (boolean
+ = false
)
+ the highlight value to be set (true or false).
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The tick function simply calls React set state in order to update component and render nodes +along time as d3 calculates new node positioning.
+ + +(Object
+ = {}
)
+ new state to pass on.
+
+ undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Configures zoom upon graph with default or user provided values.
+https://github.com/d3/d3-zoom#zoom
undefined
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handler for 'zoom' event within zoom config.
+ + +Object
:
+ returns the transformed elements within the svg graph area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Handles mouse out node event.
+ + +Object
:
- returns an object containing the generated nodes and links that form the graph. The result is
-returned in a way that can be consumed by es6
-destructuring assignment
-.
-
-
-
-
-
-
-
+ undefined
:
-
-
- Some methods that help no the process of rendering a node.
-Converts a string that specifies a symbol into a concrete instance
-of d3 symbol.
-https://github.com/d3/d3-shape/blob/master/README.md#symbol
Handles mouse over link event.
+ + +(string)
- the string that specifies the symbol type (should be one of
-node.symbolType
-).
+ source (string)
+ id of the source node that participates in the event.
+
+ (string)
+ id of the target node that participates in the event.
Object
:
- concrete instance of d3 symbol (defaults to circle).
+ undefined
:
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Build a d3 svg symbol based on passed symbol and symbol type.
+ +Handles mouse out link event.
+ + +(string
- = 'circle'
)
- the string containing the type of symbol that we want to build
-(should be one of
-node.symbolType
-).
+ target (string)
+ id of the target node that participates in the event.
Object
:
- concrete instance of d3 symbol.
+ undefined
:
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Calls d3 simulation.stop().
+https://github.com/d3/d3-force#simulation_stop
Graph component is the main component for react-d3-graph components, its interface allows its user -to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional). -The code for the live example -can be consulted here
+- Extends - - React.Component - -
- - - - - - - - -(any)
-
- import { Graph } from 'react-d3-graph';
-// graph payload (with minimalist structure)
-const data = {
- nodes: [
- {id: 'Harry'},
- {id: 'Sally'},
- {id: 'Alice'}
- ],
- links: [
- {source: 'Harry', target: 'Sally'},
- {source: 'Harry', target: 'Alice'},
- ]
-};
-// the graph configuration, you only need to pass down properties
-// that you want to override, otherwise default ones will be used
-const myConfig = {
- nodeHighlightBehavior: true,
- node: {
- color: 'lightgreen',
- size: 120,
- highlightStrokeColor: 'blue'
- },
- link: {
- highlightColor: 'lightblue'
- }
-};
-// graph event callbacks
-const onClickNode = function(nodeId) {
- window.alert('Clicked node ${nodeId}');
-};
-const onMouseOverNode = function(nodeId) {
- window.alert(`Mouse over node ${nodeId}`);
-};
-const onMouseOutNode = function(nodeId) {
- window.alert(`Mouse out node ${nodeId}`);
-};
-const onClickLink = function(source, target) {
- window.alert(`Clicked link between ${source} and ${target}`);
-};
-const onMouseOverLink = function(source, target) {
- window.alert(`Mouse over in link between ${source} and ${target}`);
-};
-const onMouseOutLink = function(source, target) {
- window.alert(`Mouse out link between ${source} and ${target}`);
-};
+ Returns
+ undefined
:
+
-<Graph
- id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
- data={data}
- config={myConfig}
- onClickNode={onClickNode}
- onClickLink={onClickLink}
- onMouseOverNode={onMouseOverNode}
- onMouseOutNode={onMouseOutNode}
- onMouseOverLink={onMouseOverLink}
- onMouseOutLink={onMouseOutLink}/>
-
-
-
-
- Sets d3 tick function and configures other d3 stuff such as forces and drag events.
+ +This method resets all nodes fixed positions by deleting the properties fx (fixed x) +and fy (fixed y). Following this, a simulation is triggered in order to force nodes to go back +to their original positions (or at least new positions according to the d3 force parameters).
+ + +undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handles d3 drag 'end' event.
+ +Calls d3 simulation.restart().
+https://github.com/d3/d3-force#simulation_restart
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handles d3 'drag' event. -more about d3 drag
+ +Collapses the nodes, then calls the callback passed to the component.
+ + +(Object)
- if not undefined it will contain event data.
- undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Offers a series of methods that isolate render logic for Graph component.
+ + +Sets nodes and links highlighted value.
+ +Build Link components given a list of links.
+ + +(string)
- the id of the node to highlight.
+ nodes (Object<string, Object>)
+ same as
+nodes in buildGraph
+.
The tick function simply calls React set state in order to update component and render nodes -along time as d3 calculates new node positioning.
+(Object)
- new state to pass on.
+ highlightedLink (Object)
+ same as
+highlightedLink in buildGraph
+.
Array<Object>
:
+ returns the generated array of Link components.
-
- Configures zoom upon graph with default or user provided values.
-https://github.com/d3/d3-zoom#zoom
undefined
:
-
-
-
-
-
-
-
-
-
Handler for 'zoom' event within zoom config.
+Function that builds Node components.
-Object
:
- returns the transformed elements within the svg graph area.
-
-
-
-
-
-
-
-
-(Object)
+ this object contains a source and target property for a link that is highlighted at some point in time.
-
-
- undefined
:
-
+ Name | +Description | +
---|---|
highlightedLink.source string
+ |
+ id of source node for highlighted link. + | +
highlightedLink.target string
+ |
+ id of target node for highlighted link. + | +
Handles mouse out node event.
+(number)
+ value that indicates the amount of zoom transformation.
- undefined
:
-
+ Object
:
+ returns the generated array of nodes components
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Handles mouse over link event.
+ +Method that actually is exported an consumed by Graph component in order to build all Nodes and Link +components.
+ + +undefined
:
-
-
-
-
-
-
-
-
-
-
+ Handles mouse out link event.
+(Object<string, Object>)
+ an object containing a matrix of connections of the graph, for each nodeId,
+there is an Object that maps adjacent nodes ids (string) and their values (number).
+ // links example
+ {
+ "Androsynth": {
+ "Chenjesu": 1,
+ "Ilwrath": 1,
+ "Mycon": 1,
+ "Spathi": 1,
+ "Umgah": 1,
+ "VUX": 1,
+ "Guardian": 1
+ },
+ "Chenjesu": {
+ "Androsynth": 1,
+ "Mycon": 1,
+ "Spathi": 1,
+ "Umgah": 1,
+ "VUX": 1,
+ "Broodhmome": 1
+ },
+ ...
+ }
- (Object)
+ this object contains a source and target property for a link that is highlighted at some point in time.
-
+ Name | +Description | +
---|---|
highlightedLink.source string
+ |
+ id of source node for highlighted link. + | +
highlightedLink.target string
+ |
+ id of target node for highlighted link. + | +
Object
:
+ returns an object containing the generated nodes and links that form the graph.
-
- This method resets all nodes fixed positions by deleting the properties fx (fixed x) -and fy (fixed y). Following this, a simulation is triggered in order to force nodes to go back -to their original positions (or at least new positions according to the d3 force parameters).
-undefined
:
-
-
-
-
-
-
-
-
-
Calls d3 simulation.restart().
-https://github.com/d3/d3-force#simulation_restart
undefined
:
-
-
-
-
-
-
+ Node component is responsible for encapsulating node render.
- -Offers a series of methods that isolate render logic for Graph component.
++ Extends - - - - - - + React.Component - +
- - - - - - - -Node component is responsible for encapsulating node render.
-- Extends - - React.Component - -
- - - - - - - - - - - -const onClickNode = function(nodeId) {
window.alert('Clicked node', nodeId);
};
@@ -4059,15 +5226,15 @@
onClickNode={onClickNode}
onMouseOverNode={onMouseOverNode}
onMouseOutNode={onMouseOutNode} />
-
-
-
-
+
+
+
+
Handle click on the node.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handle mouse over node event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handle mouse out node event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Link component is responsible for encapsulating link render.
Extends - + React.Component - +
- - - - - - - - - - - - + + + + + + + + + + + +const onClickLink = function(source, target) {
window.alert(`Clicked link between ${source} and ${target}`);
};
@@ -4299,6 +5466,7 @@
};
<Link
+ d="M1..."
source='idSourceNode'
target='idTargetNode'
x1=22
@@ -4312,15 +5480,15 @@
onClickLink={onClickLink}
onMouseOverLink={onMouseOverLink}
onMouseOutLink={onMouseOutLink} />
-
-
-
-
+
+
+
+
Handle mouse over link event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Handle mouse out link event.
undefined
:
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Offers a series of generic methods for object manipulation, and other operations that are common across rd3g such as error logging.
Checks whether a certain object property is from object type and is a non empty object.
- - - - - - - - - + + + + + + + + +boolean
:
returns true if o
@@ -4598,24 +5766,24 @@ Generic deep comparison between javascript simple or complex objects.
- - - - - - - - - + + + + + + + + +(Object)
one of the objects to be compared.
(Object)
second object to compare with first.
(number
@@ -4671,38 +5839,38 @@
this parameter serves only for internal usage.
boolean
:
returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Checks whether or not a certain object is empty. NOTE: If the passed parameter is not an object the method return false.
- - - - - - - - - + + + + + + + + +(Object)
object whom emptiness we want to check.
boolean
:
true if the given object is n ft and object and is empty.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
This function merges two objects o1 and o2, where o2 properties override existent o1 properties, and if o2 doesn't posses some o1 property the fallback will be the o1 property.
- - - - - - - - - + + + + + + + + +(Object
@@ -4810,9 +5978,9 @@
object.
(Object
@@ -4820,9 +5988,9 @@
object that will override o1 properties.
(int
@@ -4830,39 +5998,39 @@
the depth at which we are merging the object.
Object
:
object that is the result of merging o1 and o2, being o2 properties priority overriding
existent o1 properties.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Create new object from the inputted one only with the props passed in the props list.
- - - - - - - - - + + + + + + + + +(Object)
the object to pick props from.
Object
:
the object resultant from the picking operation.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Helper function for customized error logging.
- - - - - - - - - + + + + + + + + +(string)
the name of the component where the error is to be thrown.
(string)
the message contain a more detailed explanation about the error.
Error
:
the thrown error.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
=0;)(r=a[o])&&(i&&i!==r.nextSibling&&i.parentNode.insertBefore(r,i),i=r);return this},sort:function(e){function t(t,n){return t&&n?e(t.__data__,n.__data__):!t-!n}e||(e=b);for(var n=this._groups,r=n.length,a=new Array(r),o=0;o 1){for(var y=Array(v),g=0;g0)for(var n,r,a=new Array(n),o=0;o