🔗 Live Demo
Versions
-
-
- 1.2.0 (latest) 🚀 +
- 1.2.1 (latest) 🚀 +
- 1.2.0
- 1.0.1
- 1.0.0
- 0.4.0 diff --git a/docs/0.4.0.html b/docs/0.4.0.html index ee067a0d5..e08a3266e 100644 --- a/docs/0.4.0.html +++ b/docs/0.4.0.html @@ -21,7 +21,8 @@
- 1.2.0 (latest) 🚀 +
- 1.2.1 (latest) 🚀 +
- 1.2.0
- 1.0.1
- 1.0.0
- 0.4.0 diff --git a/docs/1.0.0.html b/docs/1.0.0.html index 6e14a39f0..f5b7cda71 100644 --- a/docs/1.0.0.html +++ b/docs/1.0.0.html @@ -21,7 +21,8 @@
- 1.2.0 (latest) 🚀 +
- 1.2.1 (latest) 🚀 +
- 1.2.0
- 1.0.1
- 1.0.0
- 0.4.0 diff --git a/docs/1.0.1.html b/docs/1.0.1.html index 8dbfdddba..75b1dcf2b 100644 --- a/docs/1.0.1.html +++ b/docs/1.0.1.html @@ -21,7 +21,8 @@
- 1.2.0 (latest) 🚀 +
- 1.2.1 (latest) 🚀 +
- 1.2.0
- 1.0.1
- 1.0.0
- 0.4.0 diff --git a/docs/1.2.0.html b/docs/1.2.0.html new file mode 100644 index 000000000..892f6bc40 --- /dev/null +++ b/docs/1.2.0.html @@ -0,0 +1,4742 @@ + + + + +
- 'circle' +
- 'cross' +
- 'diamond' +
- 'square' +
- 'star' +
- 'triangle' +
- 'wye' +
- any: can throw the following error msg: +INSUFFICIENT_DATA - msg if no nodes are provided +INVALID_LINKS - if links point to nonexistent nodes + + +
- 1.2.0 (latest) 🚀 +
- 1.2.1 (latest) 🚀 +
- 1.2.0
- 1.0.1
- 1.0.0
- 0.4.0 @@ -118,6 +119,12 @@
- + .updateNodeHighlightedValue + +
-
@@ -683,6 +690,17 @@
Node level configurations
++ +node.fontColor +string+ + (default'black') +🔍🔍🔍 fill color for node's + ++ svg label. + node.fontSize number@@ -1146,6 +1164,13 @@: color of the node (optional). + + +
+ fontColor(string?)+ : node text label font color (optional). + +@@ -1162,6 +1187,13 @@++ svg+ @@ -1974,6 +2006,114 @@(string?)+ : custom svg for node (optional). + + ++ + + + + +
++++ ▸ + updateNodeHighlightedValue(nodes, links, config, id, value) +++@@ -3748,8 +3888,9 @@+ + + + This function updates the highlighted value for a given node and also updates highlight props.
+ + +updateNodeHighlightedValue(nodes: Object<string, Object>, links: Object<string, Object>, config: Object, id: string, value: string): Object+ + + + + + + + + + + +Parameters++ + + ++ + + + + + ++ + ++ ++ + ++ +++ ++ id+ +(string)+ identifier of node to update. + +++ ++ value+ +(string + =+ new highlight value for given node. + +false)Returns+Object: + returns an object containing the updated nodes +and the id of the highlighted node. + + + + + + + + + + + + + +cy=22 fill='green' fontSize=10 - dx=90 + fontColor='black' fontWeight='normal' + dx=90 label='label text' opacity=1 renderLabel=true diff --git a/package-lock.json b/package-lock.json index 7fa723dfe..ac548da8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-d3-graph", - "version": "1.2.0", + "version": "1.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 2959f75df..4a3c64495 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-d3-graph", - "version": "1.2.0", + "version": "1.2.1", "description": "React component to build interactive and configurable graphs with d3 effortlessly", "author": "Daniel Caldas", "license": "MIT", diff --git a/sandbox/rd3g.sandbox.bundle.js b/sandbox/rd3g.sandbox.bundle.js index 8bc4962af..20a0d9a30 100644 --- a/sandbox/rd3g.sandbox.bundle.js +++ b/sandbox/rd3g.sandbox.bundle.js @@ -1,9 +1,9 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=508)}([function(e,t,n){e.exports=n(418)()},function(e,t,n){"use strict";e.exports=n(46)},function(e,t,n){"use strict";n.r(t);var r="http://www.w3.org/1999/xhtml",o={svg:"http://www.w3.org/2000/svg",xhtml:r,xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},i=function(e){var t=e+="",n=t.indexOf(":");return n>=0&&"xmlns"!==(t=e.slice(0,n))&&(e=e.slice(n+1)),o.hasOwnProperty(t)?{space:o[t],local:e}:e};var a=function(e){var t=i(e);return(t.local?function(e){return function(){return this.ownerDocument.createElementNS(e.space,e.local)}}:function(e){return function(){var t=this.ownerDocument,n=this.namespaceURI;return n===r&&t.documentElement.namespaceURI===r?t.createElement(e):t.createElementNS(n,e)}})(t)},u=0;function s(){return new l}function l(){this._="@"+(++u).toString(36)}l.prototype=s.prototype={constructor:l,get:function(e){for(var t=this._;!(t in e);)if(!(e=e.parentNode))return;return e[t]},set:function(e,t){return e[this._]=t},remove:function(e){return this._ in e&&delete e[this._]},toString:function(){return this._}};var c=function(e){return function(){return this.matches(e)}};if("undefined"!=typeof document){var f=document.documentElement;if(!f.matches){var d=f.webkitMatchesSelector||f.msMatchesSelector||f.mozMatchesSelector||f.oMatchesSelector;c=function(e){return function(){return d.call(this,e)}}}}var p=c,h={},m=null;"undefined"!=typeof document&&("onmouseenter"in document.documentElement||(h={mouseenter:"mouseover",mouseleave:"mouseout"}));function v(e,t,n){return e=y(e,t,n),function(t){var n=t.relatedTarget;n&&(n===this||8&n.compareDocumentPosition(this))||e.call(this,t)}}function y(e,t,n){return function(r){var o=m;m=r;try{e.call(this,this.__data__,t,n)}finally{m=o}}}function g(e){return function(){var t=this.__on;if(t){for(var n,r=0,o=-1,i=t.length;r
🔗 Live Demo
Versions
-
🔗 Live Demo
Versions
-
🔗 Live Demo
Versions
- react-d3-graph 1.2.0 | Documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ graph.config
+
+
+
+
+
+
+ This is certainly the only extra piece of documentation that you will ever need
+
+Here you can consult a detailed description of each graph configurable property as well as the default values
+of those properties.
+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: [...]
+};
+Graph global configurations
+
+
+ graph.config
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ automaticRearrangeAfterDropNode (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).
+
+
+
+
+
+
+
+ height (number
+ = 400)
+ the height of the (svg) area where the graph will be rendered.
+
+
+
+
+
+
+
+ nodeHighlightBehavior (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
+.
+
+
+
+
+
+
+
+ linkHighlightBehavior (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
+)
+
+.
+
+
+
+
+
+
+
+ highlightDegree (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.
+
+
+
+
+
+
+
+ highlightOpacity (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
+).
+
+
+
+
+
+
+
+ maxZoom (number
+ = 8)
+ max zoom that can be performed against the graph.
+
+
+
+
+
+
+
+ minZoom (number
+ = 0.1)
+ min zoom that can be performed against the graph.
+
+
+
+
+
+
+
+
+
+
+
+
+ staticGraph (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.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.
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ // 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 🥔.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph/helper
+
+
+
+
+
+
+ Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
+
+
+ Graph/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ Link
+
+
+
+
+
+
+
+
+ ▸
+ Node
+
+
+
+
+
+
+
+
+
+ Node
+
+
+ Type:
+ Object
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Properties
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _createForceSimulation(width, height)
+
+
+
+
+
+
+
+ Create d3 forceSimulation to be applied on the graph.
+d3-force#forceSimulation
+d3-force#simulation_force
+Wtf is a force? here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ width (number)
+ the width of the container area of the graph.
+
+
+
+
+
+
+
+ height (number)
+ the height of the container area of the graph.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns the simulation instance to be consumed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _getNodeOpacity(node, highlightedNode, highlightedLink, config)
+
+
+
+
+
+
+
+ Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
+
+
+ _getNodeOpacity(node: Object, highlightedNode: string, highlightedLink: Object, config: Object): number
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ number:
+ the opacity value for the given node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeLinks(graphLinks)
+
+
+
+
+
+
+
+ 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeNodes(graphNodes)
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ Object<string, Object>:
+ returns the nodes ready to be used within rd3g with additional properties such as x, y
+and highlighted values.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _validateGraphData(data)
+
+
+
+
+
+
+
+ Some integrity validations on links and nodes structure. If some validation fails the function will
+throw an error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+ Throws
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildLinkProps(source, target, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build some Link properties based on given parameters.
+
+
+ buildLinkProps(source: string, target: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ the id of the source node (from).
+
+
+
+
+
+
+
+ target (string)
+ the id of the target node (to).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns an object that aggregates all props for creating respective Link component instance.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildNodeProps(node, config, nodeCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build some Node properties based on given parameters.
+
+
+ buildNodeProps(node: Object, config: Object, nodeCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns object that contain Link props ready to be feeded to the Link component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ initializeGraphState(props, state)
+
+
+
+
+
+
+
+ Encapsulates common procedures to initialize graph.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ props (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
+.
+
+
+
+
+
+
+
+
+
+
+ state (Object)
+ Graph component current state (same format as returned object on this function).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ a fully (re)initialized graph state object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build Link components for a given node.
+
+
+ _buildNodeLinks(nodeId: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Array<Object>
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ nodeId (string)
+ the id of the node to whom Link components will be generated.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Array<Object>:
+ returns the generated array of Link components.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Method that actually is exported an consumed by Graph component in order to build all Nodes and Link
+components.
+
+
+ buildGraph(nodes: Object<string, Object>, nodeCallbacks: Array<Function>, links: Object<string, Object>, linkCallbacks: Array<Function>, config: Object, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+ links (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
+ },
+ ...
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ highlightedNode (string)
+ this value contains a string that represents the some currently highlighted node.
+
+
+
+
+
+
+
+ highlightedLink (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.
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ 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
+.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Node/helper
+
+
+
+
+
+
+ Some methods that help no the process of rendering a node.
+
+
+ Node/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ _convertTypeToD3Symbol(typeName)
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ typeName (string)
+ the string that specifies the symbol type (should be one of
+node.symbolType
+).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ concrete instance of d3 symbol (defaults to circle).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildSvgSymbol(size, symbolTypeDesc)
+
+
+
+
+
+
+
+ Build a d3 svg symbol based on passed symbol and symbol type.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ size (number
+ = 80)
+ the size of the symbol.
+
+
+
+
+
+
+
+ symbolTypeDesc (string
+ = 'circle')
+ the string containing the type of symbol that we want to build
+(should be one of
+node.symbolType
+).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ concrete instance of d3 symbol.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph
+
+
+
+
+
+
+ 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
+
+
+ new Graph(props: any)
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ props (any)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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}/>
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ _graphForcesConfig()
+
+
+
+
+
+
+
+
+ ▸
+ _onDragEnd
+
+
+
+
+
+
+
+ Handles d3 drag 'end' event.
+
+
+ _onDragEnd
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragMove
+
+
+
+
+
+
+
+ Handles d3 'drag' event.
+more about d3 drag
+
+
+ _onDragMove
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ ev (Object)
+ if not undefined it will contain event data.
+
+
+
+
+
+
+
+ index (number)
+ index of the node that is being dragged.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragStart
+
+
+
+
+
+
+
+ Handles d3 drag 'start' event.
+
+
+ _onDragStart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _setNodeHighlightedValue
+
+
+
+
+
+
+
+ Sets nodes and links highlighted value.
+
+
+ _setNodeHighlightedValue
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ id (string)
+ the id of the node to highlight.
+
+
+
+
+
+
+
+ value (boolean
+ = false)
+ the highlight value to be set (true or false).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _tick
+
+
+
+
+
+
+
+ The tick function simply calls React set state in order to update component and render nodes
+along time as d3 calculates new node positioning.
+
+
+ _tick
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ state (Object)
+ new state to pass on.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomConfig
+
+
+
+
+
+
+
+ Configures zoom upon graph with default or user provided values.
+https://github.com/d3/d3-zoom#zoom
+
+
+ _zoomConfig
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomed
+
+
+
+
+
+
+
+ Handler for 'zoom' event within zoom config.
+
+
+ _zoomed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns the transformed elements within the svg graph area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOverNode
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutNode
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOverLink
+
+
+
+
+
+
+
+ Handles mouse over link event.
+
+
+ onMouseOverLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+
+
+ target (string)
+ id of the target node that participates in the event.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutLink
+
+
+
+
+
+
+
+ Handles mouse out link event.
+
+
+ onMouseOutLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+
+
+ target (string)
+ id of the target node that participates in the event.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pauseSimulation
+
+
+
+
+
+
+
+ Calls d3 simulation.stop().
+https://github.com/d3/d3-force#simulation_stop
+
+
+ pauseSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ resetNodesPositions
+
+
+
+
+
+
+
+ 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).
+
+
+ resetNodesPositions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ restartSimulation
+
+
+
+
+
+
+
+ Calls d3 simulation.restart().
+https://github.com/d3/d3-force#simulation_restart
+
+
+ restartSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph/renderer
+
+
+
+
+
+
+ Offers a series of methods that isolate render logic for Graph component.
+
+
+ Graph/renderer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Node
+
+
+
+
+
+
+ Node component is responsible for encapsulating node render.
+
+
+ new Node()
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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
+ dx=90
+ fontWeight='normal'
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ handleOnClickNode
+
+
+
+
+
+
+
+ Handle click on the node.
+
+
+ handleOnClickNode
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Link
+
+
+
+
+
+
+ Link component is responsible for encapsulating link render.
+
+
+ new Link()
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ handleOnClickLink
+
+
+
+
+
+
+
+ Handle link click event.
+
+
+ handleOnClickLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ utils
+
+
+
+
+
+
+ Offers a series of generic methods for object manipulation, and other operations
+that are common across rd3g such as error logging.
+
+
+ utils
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ _isPropertyNestedObject(o, k)
+
+
+
+
+
+
+
+ Checks whether a certain object property is from object type and is a non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ returns true if o
+[
+k
+]
+ is an non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isDeepEqual(o1, o2, _depth)
+
+
+
+
+
+
+
+ Generic deep comparison between javascript simple or complex objects.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o1 (Object)
+ one of the objects to be compared.
+
+
+
+
+
+
+
+ o2 (Object)
+ second object to compare with first.
+
+
+
+
+
+
+
+ _depth (number
+ = 0)
+ this parameter serves only for internal usage.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isObjectEmpty(o)
+
+
+
+
+
+
+
+ Checks whether or not a certain object is empty.
+NOTE: If the passed parameter is not an object the method return false.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o (Object)
+ object whom emptiness we want to check.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ true if the given object is n ft and object and is empty.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ merge(o1, o2, _depth)
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o1 (Object
+ = {})
+ object.
+
+
+
+
+
+
+
+ o2 (Object
+ = {})
+ object that will override o1 properties.
+
+
+
+
+
+
+
+ _depth (int
+ = 0)
+ the depth at which we are merging the object.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ object that is the result of merging o1 and o2, being o2 properties priority overriding
+existent o1 properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pick(o, props)
+
+
+
+
+
+
+
+ Create new object from the inputted one only with the props passed
+in the props list.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o (Object)
+ the object to pick props from.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ the object resultant from the picking operation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ throwErr(component, msg)
+
+
+
+
+
+
+
+ Helper function for customized error logging.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ component (string)
+ the name of the component where the error is to be thrown.
+
+
+
+
+
+
+
+ msg (string)
+ the message contain a more detailed explanation about the error.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Error:
+ the thrown error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/index.html b/docs/index.html
index 4e17ed3c5..621632cd2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,7 +2,7 @@
- react-d3-graph 1.2.0 | Documentation
+ react-d3-graph 1.2.1 | Documentation
@@ -15,13 +15,14 @@
react-d3-graph
- 1.2.0
+ 1.2.1
Quick Links
🔗 GitHub Repo
🔗 Live Demo
Versions
- Versions
.initializeGraphState
+
🔗 Live Demo
Versions
-
🔗 Live Demo
Versions
- react-d3-graph 1.2.0 | Documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ graph.config
+
+
+
+
+
+
+ This is certainly the only extra piece of documentation that you will ever need
+
+Here you can consult a detailed description of each graph configurable property as well as the default values
+of those properties.
+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: [...]
+};
+Graph global configurations
+
+
+ graph.config
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ automaticRearrangeAfterDropNode (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).
+
+
+
+
+
+
+
+ height (number
+ = 400)
+ the height of the (svg) area where the graph will be rendered.
+
+
+
+
+
+
+
+ nodeHighlightBehavior (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
+.
+
+
+
+
+
+
+
+ linkHighlightBehavior (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
+)
+
+.
+
+
+
+
+
+
+
+ highlightDegree (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.
+
+
+
+
+
+
+
+ highlightOpacity (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
+).
+
+
+
+
+
+
+
+ maxZoom (number
+ = 8)
+ max zoom that can be performed against the graph.
+
+
+
+
+
+
+
+ minZoom (number
+ = 0.1)
+ min zoom that can be performed against the graph.
+
+
+
+
+
+
+
+
+
+
+
+
+ staticGraph (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.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.
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ // 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 🥔.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph/helper
+
+
+
+
+
+
+ Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
+
+
+ Graph/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ Link
+
+
+
+
+
+
+
+
+ ▸
+ Node
+
+
+
+
+
+
+
+
+
+ Node
+
+
+ Type:
+ Object
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Properties
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _createForceSimulation(width, height)
+
+
+
+
+
+
+
+ Create d3 forceSimulation to be applied on the graph.
+d3-force#forceSimulation
+d3-force#simulation_force
+Wtf is a force? here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ width (number)
+ the width of the container area of the graph.
+
+
+
+
+
+
+
+ height (number)
+ the height of the container area of the graph.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns the simulation instance to be consumed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _getNodeOpacity(node, highlightedNode, highlightedLink, config)
+
+
+
+
+
+
+
+ Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
+
+
+ _getNodeOpacity(node: Object, highlightedNode: string, highlightedLink: Object, config: Object): number
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ number:
+ the opacity value for the given node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeLinks(graphLinks)
+
+
+
+
+
+
+
+ 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeNodes(graphNodes)
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ Object<string, Object>:
+ returns the nodes ready to be used within rd3g with additional properties such as x, y
+and highlighted values.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _validateGraphData(data)
+
+
+
+
+
+
+
+ Some integrity validations on links and nodes structure. If some validation fails the function will
+throw an error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+ Throws
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildLinkProps(source, target, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build some Link properties based on given parameters.
+
+
+ buildLinkProps(source: string, target: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ the id of the source node (from).
+
+
+
+
+
+
+
+ target (string)
+ the id of the target node (to).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns an object that aggregates all props for creating respective Link component instance.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildNodeProps(node, config, nodeCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build some Node properties based on given parameters.
+
+
+ buildNodeProps(node: Object, config: Object, nodeCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns object that contain Link props ready to be feeded to the Link component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ initializeGraphState(props, state)
+
+
+
+
+
+
+
+ Encapsulates common procedures to initialize graph.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ props (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
+.
+
+
+
+
+
+
+
+
+
+
+ state (Object)
+ Graph component current state (same format as returned object on this function).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ a fully (re)initialized graph state object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build Link components for a given node.
+
+
+ _buildNodeLinks(nodeId: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Array<Object>
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ nodeId (string)
+ the id of the node to whom Link components will be generated.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Array<Object>:
+ returns the generated array of Link components.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Method that actually is exported an consumed by Graph component in order to build all Nodes and Link
+components.
+
+
+ buildGraph(nodes: Object<string, Object>, nodeCallbacks: Array<Function>, links: Object<string, Object>, linkCallbacks: Array<Function>, config: Object, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+ links (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
+ },
+ ...
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ highlightedNode (string)
+ this value contains a string that represents the some currently highlighted node.
+
+
+
+
+
+
+
+ highlightedLink (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.
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ 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
+.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Node/helper
+
+
+
+
+
+
+ Some methods that help no the process of rendering a node.
+
+
+ Node/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ _convertTypeToD3Symbol(typeName)
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ typeName (string)
+ the string that specifies the symbol type (should be one of
+node.symbolType
+).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ concrete instance of d3 symbol (defaults to circle).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildSvgSymbol(size, symbolTypeDesc)
+
+
+
+
+
+
+
+ Build a d3 svg symbol based on passed symbol and symbol type.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ size (number
+ = 80)
+ the size of the symbol.
+
+
+
+
+
+
+
+ symbolTypeDesc (string
+ = 'circle')
+ the string containing the type of symbol that we want to build
+(should be one of
+node.symbolType
+).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ concrete instance of d3 symbol.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph
+
+
+
+
+
+
+ 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
+
+
+ new Graph(props: any)
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ props (any)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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}/>
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ _graphForcesConfig()
+
+
+
+
+
+
+
+
+ ▸
+ _onDragEnd
+
+
+
+
+
+
+
+ Handles d3 drag 'end' event.
+
+
+ _onDragEnd
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragMove
+
+
+
+
+
+
+
+ Handles d3 'drag' event.
+more about d3 drag
+
+
+ _onDragMove
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ ev (Object)
+ if not undefined it will contain event data.
+
+
+
+
+
+
+
+ index (number)
+ index of the node that is being dragged.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragStart
+
+
+
+
+
+
+
+ Handles d3 drag 'start' event.
+
+
+ _onDragStart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _setNodeHighlightedValue
+
+
+
+
+
+
+
+ Sets nodes and links highlighted value.
+
+
+ _setNodeHighlightedValue
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ id (string)
+ the id of the node to highlight.
+
+
+
+
+
+
+
+ value (boolean
+ = false)
+ the highlight value to be set (true or false).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _tick
+
+
+
+
+
+
+
+ The tick function simply calls React set state in order to update component and render nodes
+along time as d3 calculates new node positioning.
+
+
+ _tick
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ state (Object)
+ new state to pass on.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomConfig
+
+
+
+
+
+
+
+ Configures zoom upon graph with default or user provided values.
+https://github.com/d3/d3-zoom#zoom
+
+
+ _zoomConfig
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomed
+
+
+
+
+
+
+
+ Handler for 'zoom' event within zoom config.
+
+
+ _zoomed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns the transformed elements within the svg graph area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOverNode
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutNode
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOverLink
+
+
+
+
+
+
+
+ Handles mouse over link event.
+
+
+ onMouseOverLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+
+
+ target (string)
+ id of the target node that participates in the event.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutLink
+
+
+
+
+
+
+
+ Handles mouse out link event.
+
+
+ onMouseOutLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+
+
+ target (string)
+ id of the target node that participates in the event.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pauseSimulation
+
+
+
+
+
+
+
+ Calls d3 simulation.stop().
+https://github.com/d3/d3-force#simulation_stop
+
+
+ pauseSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ resetNodesPositions
+
+
+
+
+
+
+
+ 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).
+
+
+ resetNodesPositions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ restartSimulation
+
+
+
+
+
+
+
+ Calls d3 simulation.restart().
+https://github.com/d3/d3-force#simulation_restart
+
+
+ restartSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph/renderer
+
+
+
+
+
+
+ Offers a series of methods that isolate render logic for Graph component.
+
+
+ Graph/renderer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Node
+
+
+
+
+
+
+ Node component is responsible for encapsulating node render.
+
+
+ new Node()
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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
+ dx=90
+ fontWeight='normal'
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ handleOnClickNode
+
+
+
+
+
+
+
+ Handle click on the node.
+
+
+ handleOnClickNode
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Link
+
+
+
+
+
+
+ Link component is responsible for encapsulating link render.
+
+
+ new Link()
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ handleOnClickLink
+
+
+
+
+
+
+
+ Handle link click event.
+
+
+ handleOnClickLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ utils
+
+
+
+
+
+
+ Offers a series of generic methods for object manipulation, and other operations
+that are common across rd3g such as error logging.
+
+
+ utils
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ _isPropertyNestedObject(o, k)
+
+
+
+
+
+
+
+ Checks whether a certain object property is from object type and is a non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ returns true if o
+[
+k
+]
+ is an non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isDeepEqual(o1, o2, _depth)
+
+
+
+
+
+
+
+ Generic deep comparison between javascript simple or complex objects.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o1 (Object)
+ one of the objects to be compared.
+
+
+
+
+
+
+
+ o2 (Object)
+ second object to compare with first.
+
+
+
+
+
+
+
+ _depth (number
+ = 0)
+ this parameter serves only for internal usage.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isObjectEmpty(o)
+
+
+
+
+
+
+
+ Checks whether or not a certain object is empty.
+NOTE: If the passed parameter is not an object the method return false.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o (Object)
+ object whom emptiness we want to check.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ true if the given object is n ft and object and is empty.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ merge(o1, o2, _depth)
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o1 (Object
+ = {})
+ object.
+
+
+
+
+
+
+
+ o2 (Object
+ = {})
+ object that will override o1 properties.
+
+
+
+
+
+
+
+ _depth (int
+ = 0)
+ the depth at which we are merging the object.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ object that is the result of merging o1 and o2, being o2 properties priority overriding
+existent o1 properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pick(o, props)
+
+
+
+
+
+
+
+ Create new object from the inputted one only with the props passed
+in the props list.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o (Object)
+ the object to pick props from.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ the object resultant from the picking operation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ throwErr(component, msg)
+
+
+
+
+
+
+
+ Helper function for customized error logging.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ component (string)
+ the name of the component where the error is to be thrown.
+
+
+
+
+
+
+
+ msg (string)
+ the message contain a more detailed explanation about the error.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Error:
+ the thrown error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/index.html b/docs/index.html
index 4e17ed3c5..621632cd2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,7 +2,7 @@
- react-d3-graph 1.2.0 | Documentation
+ react-d3-graph 1.2.1 | Documentation
@@ -15,13 +15,14 @@
react-d3-graph
- 1.2.0
+ 1.2.1
Quick Links
🔗 GitHub Repo
🔗 Live Demo
Versions
- Versions
.initializeGraphState
+
🔗 Live Demo
Versions
- react-d3-graph 1.2.0 | Documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ graph.config
+
+
+
+
+
+
+ This is certainly the only extra piece of documentation that you will ever need
+
+Here you can consult a detailed description of each graph configurable property as well as the default values
+of those properties.
+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: [...]
+};
+Graph global configurations
+
+
+ graph.config
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ automaticRearrangeAfterDropNode (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).
+
+
+
+
+
+
+
+ height (number
+ = 400)
+ the height of the (svg) area where the graph will be rendered.
+
+
+
+
+
+
+
+ nodeHighlightBehavior (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
+.
+
+
+
+
+
+
+
+ linkHighlightBehavior (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
+)
+
+.
+
+
+
+
+
+
+
+ highlightDegree (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.
+
+
+
+
+
+
+
+ highlightOpacity (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
+).
+
+
+
+
+
+
+
+ maxZoom (number
+ = 8)
+ max zoom that can be performed against the graph.
+
+
+
+
+
+
+
+ minZoom (number
+ = 0.1)
+ min zoom that can be performed against the graph.
+
+
+
+
+
+
+
+
+
+
+
+
+ staticGraph (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.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.
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ // 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 🥔.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph/helper
+
+
+
+
+
+
+ Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
+
+
+ Graph/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ Link
+
+
+
+
+
+
+
+
+ ▸
+ Node
+
+
+
+
+
+
+
+
+
+ Node
+
+
+ Type:
+ Object
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Properties
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _createForceSimulation(width, height)
+
+
+
+
+
+
+
+ Create d3 forceSimulation to be applied on the graph.
+d3-force#forceSimulation
+d3-force#simulation_force
+Wtf is a force? here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ width (number)
+ the width of the container area of the graph.
+
+
+
+
+
+
+
+ height (number)
+ the height of the container area of the graph.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns the simulation instance to be consumed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _getNodeOpacity(node, highlightedNode, highlightedLink, config)
+
+
+
+
+
+
+
+ Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
+
+
+ _getNodeOpacity(node: Object, highlightedNode: string, highlightedLink: Object, config: Object): number
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ number:
+ the opacity value for the given node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeLinks(graphLinks)
+
+
+
+
+
+
+
+ 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeNodes(graphNodes)
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ Object<string, Object>:
+ returns the nodes ready to be used within rd3g with additional properties such as x, y
+and highlighted values.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _validateGraphData(data)
+
+
+
+
+
+
+
+ Some integrity validations on links and nodes structure. If some validation fails the function will
+throw an error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+ Throws
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildLinkProps(source, target, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build some Link properties based on given parameters.
+
+
+ buildLinkProps(source: string, target: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ the id of the source node (from).
+
+
+
+
+
+
+
+ target (string)
+ the id of the target node (to).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns an object that aggregates all props for creating respective Link component instance.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildNodeProps(node, config, nodeCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build some Node properties based on given parameters.
+
+
+ buildNodeProps(node: Object, config: Object, nodeCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns object that contain Link props ready to be feeded to the Link component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ initializeGraphState(props, state)
+
+
+
+
+
+
+
+ Encapsulates common procedures to initialize graph.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ props (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
+.
+
+
+
+
+
+
+
+
+
+
+ state (Object)
+ Graph component current state (same format as returned object on this function).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ a fully (re)initialized graph state object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Build Link components for a given node.
+
+
+ _buildNodeLinks(nodeId: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Array<Object>
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ nodeId (string)
+ the id of the node to whom Link components will be generated.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Array<Object>:
+ returns the generated array of Link components.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+ Method that actually is exported an consumed by Graph component in order to build all Nodes and Link
+components.
+
+
+ buildGraph(nodes: Object<string, Object>, nodeCallbacks: Array<Function>, links: Object<string, Object>, linkCallbacks: Array<Function>, config: Object, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+ links (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
+ },
+ ...
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ highlightedNode (string)
+ this value contains a string that represents the some currently highlighted node.
+
+
+
+
+
+
+
+ highlightedLink (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.
+
+
+
+
+
+
+
+
+
+
+ transform (number)
+ value that indicates the amount of zoom transformation.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ 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
+.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Node/helper
+
+
+
+
+
+
+ Some methods that help no the process of rendering a node.
+
+
+ Node/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ _convertTypeToD3Symbol(typeName)
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ typeName (string)
+ the string that specifies the symbol type (should be one of
+node.symbolType
+).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ concrete instance of d3 symbol (defaults to circle).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildSvgSymbol(size, symbolTypeDesc)
+
+
+
+
+
+
+
+ Build a d3 svg symbol based on passed symbol and symbol type.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ size (number
+ = 80)
+ the size of the symbol.
+
+
+
+
+
+
+
+ symbolTypeDesc (string
+ = 'circle')
+ the string containing the type of symbol that we want to build
+(should be one of
+node.symbolType
+).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ concrete instance of d3 symbol.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph
+
+
+
+
+
+
+ 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
+
+
+ new Graph(props: any)
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ props (any)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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}/>
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ _graphForcesConfig()
+
+
+
+
+
+
+
+
+ ▸
+ _onDragEnd
+
+
+
+
+
+
+
+ Handles d3 drag 'end' event.
+
+
+ _onDragEnd
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragMove
+
+
+
+
+
+
+
+ Handles d3 'drag' event.
+more about d3 drag
+
+
+ _onDragMove
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ ev (Object)
+ if not undefined it will contain event data.
+
+
+
+
+
+
+
+ index (number)
+ index of the node that is being dragged.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragStart
+
+
+
+
+
+
+
+ Handles d3 drag 'start' event.
+
+
+ _onDragStart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _setNodeHighlightedValue
+
+
+
+
+
+
+
+ Sets nodes and links highlighted value.
+
+
+ _setNodeHighlightedValue
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ id (string)
+ the id of the node to highlight.
+
+
+
+
+
+
+
+ value (boolean
+ = false)
+ the highlight value to be set (true or false).
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _tick
+
+
+
+
+
+
+
+ The tick function simply calls React set state in order to update component and render nodes
+along time as d3 calculates new node positioning.
+
+
+ _tick
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ state (Object)
+ new state to pass on.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomConfig
+
+
+
+
+
+
+
+ Configures zoom upon graph with default or user provided values.
+https://github.com/d3/d3-zoom#zoom
+
+
+ _zoomConfig
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomed
+
+
+
+
+
+
+
+ Handler for 'zoom' event within zoom config.
+
+
+ _zoomed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns the transformed elements within the svg graph area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOverNode
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutNode
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOverLink
+
+
+
+
+
+
+
+ Handles mouse over link event.
+
+
+ onMouseOverLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+
+
+ target (string)
+ id of the target node that participates in the event.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutLink
+
+
+
+
+
+
+
+ Handles mouse out link event.
+
+
+ onMouseOutLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ source (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+
+
+ target (string)
+ id of the target node that participates in the event.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pauseSimulation
+
+
+
+
+
+
+
+ Calls d3 simulation.stop().
+https://github.com/d3/d3-force#simulation_stop
+
+
+ pauseSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ resetNodesPositions
+
+
+
+
+
+
+
+ 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).
+
+
+ resetNodesPositions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ restartSimulation
+
+
+
+
+
+
+
+ Calls d3 simulation.restart().
+https://github.com/d3/d3-force#simulation_restart
+
+
+ restartSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Graph/renderer
+
+
+
+
+
+
+ Offers a series of methods that isolate render logic for Graph component.
+
+
+ Graph/renderer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Node
+
+
+
+
+
+
+ Node component is responsible for encapsulating node render.
+
+
+ new Node()
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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
+ dx=90
+ fontWeight='normal'
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ handleOnClickNode
+
+
+
+
+
+
+
+ Handle click on the node.
+
+
+ handleOnClickNode
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Link
+
+
+
+
+
+
+ Link component is responsible for encapsulating link render.
+
+
+ new Link()
+
+
+
+ Extends
+
+ React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+ ▸
+ handleOnClickLink
+
+
+
+
+
+
+
+ Handle link click event.
+
+
+ handleOnClickLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ utils
+
+
+
+
+
+
+ Offers a series of generic methods for object manipulation, and other operations
+that are common across rd3g such as error logging.
+
+
+ utils
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+ ▸
+ _isPropertyNestedObject(o, k)
+
+
+
+
+
+
+
+ Checks whether a certain object property is from object type and is a non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ returns true if o
+[
+k
+]
+ is an non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isDeepEqual(o1, o2, _depth)
+
+
+
+
+
+
+
+ Generic deep comparison between javascript simple or complex objects.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o1 (Object)
+ one of the objects to be compared.
+
+
+
+
+
+
+
+ o2 (Object)
+ second object to compare with first.
+
+
+
+
+
+
+
+ _depth (number
+ = 0)
+ this parameter serves only for internal usage.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isObjectEmpty(o)
+
+
+
+
+
+
+
+ Checks whether or not a certain object is empty.
+NOTE: If the passed parameter is not an object the method return false.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o (Object)
+ object whom emptiness we want to check.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ true if the given object is n ft and object and is empty.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ merge(o1, o2, _depth)
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o1 (Object
+ = {})
+ object.
+
+
+
+
+
+
+
+ o2 (Object
+ = {})
+ object that will override o1 properties.
+
+
+
+
+
+
+
+ _depth (int
+ = 0)
+ the depth at which we are merging the object.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ object that is the result of merging o1 and o2, being o2 properties priority overriding
+existent o1 properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pick(o, props)
+
+
+
+
+
+
+
+ Create new object from the inputted one only with the props passed
+in the props list.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ o (Object)
+ the object to pick props from.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ the object resultant from the picking operation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ throwErr(component, msg)
+
+
+
+
+
+
+
+ Helper function for customized error logging.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ component (string)
+ the name of the component where the error is to be thrown.
+
+
+
+
+
+
+
+ msg (string)
+ the message contain a more detailed explanation about the error.
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Error:
+ the thrown error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/index.html b/docs/index.html
index 4e17ed3c5..621632cd2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,7 +2,7 @@
- react-d3-graph 1.2.0 | Documentation
+ react-d3-graph 1.2.1 | Documentation
@@ -15,13 +15,14 @@
react-d3-graph
- 1.2.0
+ 1.2.1
Quick Links
🔗 GitHub Repo
🔗 Live Demo
Versions
- Versions
.initializeGraphState
+
+
+
+
+
+
+
+
diff --git a/docs/index.html b/docs/index.html
index 4e17ed3c5..621632cd2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,7 +2,7 @@
-
+
+
+
+
+
+
+Here you can consult a detailed description of each graph configurable property as well as the default values +of those properties. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + graph.config +
+ + +This is certainly the only extra piece of documentation that you will ever need
++Here you can consult a detailed description of each graph configurable property as well as the default values +of those properties. +
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: [...]
+};
+Graph global configurations
+ + +graph.config
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ automaticRearrangeAfterDropNode
+
+ (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).
+
+
+
+
+
+ height
+
+ (number
+ = 400)
+ the height of the (svg) area where the graph will be rendered.
+
+
+
+
+
+ nodeHighlightBehavior
+
+ (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
+.
+
+
+
+
+
+ linkHighlightBehavior
+
+ (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
+)
+
+.
+
+
+
+
+
+ highlightDegree
+
+ (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.
+
+
+
+
+
+ highlightOpacity
+
+ (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
+).
+
+
+
+
+
+ maxZoom
+
+ (number
+ = 8)
+ max zoom that can be performed against the graph.
+
+
+
+
+
+ minZoom
+
+ (number
+ = 0.1)
+ min zoom that can be performed against the graph.
+
+
+
+
+
+
+
+
+
+
+ staticGraph
+
+ (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.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. + | +
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. + | +
Example
+
+
+ // 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 🥔.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Graph/helper +
+ + +Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.
+ + +Graph/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ Link
+
+
+
+
+
+
+
+ ▸
+ Node
+
+
+
+
+
+
+
+
+
+
+
+ Node
+
+ + Type: + Object +
+ + + + + + + + + + + + + +Properties
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _createForceSimulation(width, height)
+
+
+
+
+
+
+
+
+
+ Create d3 forceSimulation to be applied on the graph.
+d3-force#forceSimulation
+d3-force#simulation_force
+Wtf is a force? here
Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ width
+
+ (number)
+ the width of the container area of the graph.
+
+
+
+
+
+ height
+
+ (number)
+ the height of the container area of the graph.
+
+ Returns
+ Object:
+ returns the simulation instance to be consumed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _getNodeOpacity(node, highlightedNode, highlightedLink, config)
+
+
+
+
+
+
+
+
+
+ Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
+ + +_getNodeOpacity(node: Object, highlightedNode: string, highlightedLink: Object, config: Object): number
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ node
+
+ (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ number:
+ the opacity value for the given node.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeLinks(graphLinks)
+
+
+
+
+
+
+
+
+
+ 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).
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+ Returns
+ 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _initializeNodes(graphNodes)
+
+
+
+
+
+
+
+
+
+ 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.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+ Returns
+ Object<string, Object>:
+ returns the nodes ready to be used within rd3g with additional properties such as x, y
+and highlighted values.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _validateGraphData(data)
+
+
+
+
+
+
+
+
+
+ Some integrity validations on links and nodes structure. If some validation fails the function will +throw an error.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+ Throws
+ -
+
+
+
+
+
+
+
+ ▸
+ buildLinkProps(source, target, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+
+
+ Build some Link properties based on given parameters.
+ + +buildLinkProps(source: string, target: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source
+
+ (string)
+ the id of the source node (from).
+
+
+
+
+
+ target
+
+ (string)
+ the id of the target node (to).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform
+
+ (number)
+ value that indicates the amount of zoom transformation.
+
+ Returns
+ Object:
+ returns an object that aggregates all props for creating respective Link component instance.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildNodeProps(node, config, nodeCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+
+
+ Build some Node properties based on given parameters.
+ + +buildNodeProps(node: Object, config: Object, nodeCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ node
+
+ (Object)
+ the node object for whom we will generate properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform
+
+ (number)
+ value that indicates the amount of zoom transformation.
+
+ Returns
+ Object:
+ returns object that contain Link props ready to be feeded to the Link component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ initializeGraphState(props, state)
+
+
+
+
+
+
+
+
+
+ Encapsulates common procedures to initialize graph.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ props
+
+ (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 +. + | +
+
+
+
+ state
+
+ (Object)
+ Graph component current state (same format as returned object on this function).
+
+ Returns
+ Object:
+ a fully (re)initialized graph state object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+
+
+ Build Link components for a given node.
+ + +_buildNodeLinks(nodeId: string, nodes: Object<string, Object>, links: Object<string, Object>, config: Object, linkCallbacks: Array<Function>, highlightedNode: string, highlightedLink: Object, transform: number): Array<Object>
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ nodeId
+
+ (string)
+ the id of the node to whom Link components will be generated.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform
+
+ (number)
+ value that indicates the amount of zoom transformation.
+
+ Returns
+ Array<Object>:
+ returns the generated array of Link components.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, highlightedNode, highlightedLink, transform)
+
+
+
+
+
+
+
+
+
+ Method that actually is exported an consumed by Graph component in order to build all Nodes and Link +components.
+ + +buildGraph(nodes: Object<string, Object>, nodeCallbacks: Array<Function>, links: Object<string, Object>, linkCallbacks: Array<Function>, config: Object, highlightedNode: string, highlightedLink: Object, transform: number): Object
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ links
+
+ (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
+ },
+ ...
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ highlightedNode
+
+ (string)
+ this value contains a string that represents the some currently highlighted node.
+
+
+
+
+
+
+
+
+ highlightedLink
+
+ (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. + | +
+
+
+
+ transform
+
+ (number)
+ value that indicates the amount of zoom transformation.
+
+ Returns
+ 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
+.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Node/helper +
+ + +Some methods that help no the process of rendering a node.
+ + +Node/helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _convertTypeToD3Symbol(typeName)
+
+
+
+
+
+
+
+
+
+ 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
Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ typeName
+
+ (string)
+ the string that specifies the symbol type (should be one of
+node.symbolType
+).
+
+ Returns
+ Object:
+ concrete instance of d3 symbol (defaults to circle).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ buildSvgSymbol(size, symbolTypeDesc)
+
+
+
+
+
+
+
+
+
+ Build a d3 svg symbol based on passed symbol and symbol type.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ size
+
+ (number
+ = 80)
+ the size of the symbol.
+
+
+
+
+
+ symbolTypeDesc
+
+ (string
+ = 'circle')
+ the string containing the type of symbol that we want to build
+(should be one of
+node.symbolType
+).
+
+ Returns
+ Object:
+ concrete instance of d3 symbol.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Graph +
+ + +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
+ + +new Graph(props: any)
+
+
+ + Extends + + React.Component + +
+ + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ props
+
+ (any)
+
+ Example
+
+
+ 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}/>
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _graphForcesConfig()
+
+
+
+
+
+
+
+ ▸
+ _onDragEnd
+
+
+
+
+
+
+
+
+
+ Handles d3 drag 'end' event.
+ + +_onDragEnd
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragMove
+
+
+
+
+
+
+
+
+
+ Handles d3 'drag' event. +more about d3 drag
+ + +_onDragMove
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ev
+
+ (Object)
+ if not undefined it will contain event data.
+
+
+
+
+
+
+
+ index
+
+ (number)
+ index of the node that is being dragged.
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _onDragStart
+
+
+
+
+
+
+
+
+
+ Handles d3 drag 'start' event.
+ + +_onDragStart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _setNodeHighlightedValue
+
+
+
+
+
+
+
+
+
+ Sets nodes and links highlighted value.
+ + +_setNodeHighlightedValue
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ id
+
+ (string)
+ the id of the node to highlight.
+
+
+
+
+
+ value
+
+ (boolean
+ = false)
+ the highlight value to be set (true or false).
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _tick
+
+
+
+
+
+
+
+
+
+ The tick function simply calls React set state in order to update component and render nodes +along time as d3 calculates new node positioning.
+ + +_tick
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ state
+
+ (Object)
+ new state to pass on.
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomConfig
+
+
+
+
+
+
+
+
+
+ Configures zoom upon graph with default or user provided values.
+https://github.com/d3/d3-zoom#zoom
_zoomConfig
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _zoomed
+
+
+
+
+
+
+
+
+
+ Handler for 'zoom' event within zoom config.
+ + +_zoomed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Object:
+ returns the transformed elements within the svg graph area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOverNode
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutNode
+
+
+
+
+
+
+
+ ▸
+ onMouseOverLink
+
+
+
+
+
+
+
+
+
+ Handles mouse over link event.
+ + +onMouseOverLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source
+
+ (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+ target
+
+ (string)
+ id of the target node that participates in the event.
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ onMouseOutLink
+
+
+
+
+
+
+
+
+
+ Handles mouse out link event.
+ + +onMouseOutLink
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source
+
+ (string)
+ id of the source node that participates in the event.
+
+
+
+
+
+ target
+
+ (string)
+ id of the target node that participates in the event.
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pauseSimulation
+
+
+
+
+
+
+
+
+
+ Calls d3 simulation.stop().
+https://github.com/d3/d3-force#simulation_stop
pauseSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ resetNodesPositions
+
+
+
+
+
+
+
+
+
+ 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).
+ + +resetNodesPositions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ restartSimulation
+
+
+
+
+
+
+
+
+
+ Calls d3 simulation.restart().
+https://github.com/d3/d3-force#simulation_restart
restartSimulation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Graph/renderer +
+ + +Offers a series of methods that isolate render logic for Graph component.
+ + +Graph/renderer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Node +
+ + +Node component is responsible for encapsulating node render.
+ + +new Node()
+
+
+ + Extends + + React.Component + +
+ + + + + + + + + + + + + + + + + + +Example
+
+
+ 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
+ dx=90
+ fontWeight='normal'
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ handleOnClickNode
+
+
+
+
+
+
+
+
+
+ Handle click on the node.
+ + +handleOnClickNode
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Link +
+ + +Link component is responsible for encapsulating link render.
+ + +new Link()
+
+
+ + Extends + + React.Component + +
+ + + + + + + + + + + + + + + + + + +Example
+
+
+ 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} />
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ handleOnClickLink
+
+
+
+
+
+
+
+
+
+ Handle link click event.
+ + +handleOnClickLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ undefined:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + utils +
+ + +Offers a series of generic methods for object manipulation, and other operations +that are common across rd3g such as error logging.
+ + +utils
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ _isPropertyNestedObject(o, k)
+
+
+
+
+
+
+
+
+
+ Checks whether a certain object property is from object type and is a non empty object.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+ Returns
+ boolean:
+ returns true if o
+[
+k
+]
+ is an non empty object.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isDeepEqual(o1, o2, _depth)
+
+
+
+
+
+
+
+
+
+ Generic deep comparison between javascript simple or complex objects.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ o1
+
+ (Object)
+ one of the objects to be compared.
+
+
+
+
+
+ o2
+
+ (Object)
+ second object to compare with first.
+
+
+
+
+
+ _depth
+
+ (number
+ = 0)
+ this parameter serves only for internal usage.
+
+ Returns
+ boolean:
+ returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ isObjectEmpty(o)
+
+
+
+
+
+
+
+
+
+ Checks whether or not a certain object is empty. +NOTE: If the passed parameter is not an object the method return false.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ o
+
+ (Object)
+ object whom emptiness we want to check.
+
+ Returns
+ boolean:
+ true if the given object is n ft and object and is empty.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ merge(o1, o2, _depth)
+
+
+
+
+
+
+
+
+
+ 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.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ o1
+
+ (Object
+ = {})
+ object.
+
+
+
+
+
+ o2
+
+ (Object
+ = {})
+ object that will override o1 properties.
+
+
+
+
+
+ _depth
+
+ (int
+ = 0)
+ the depth at which we are merging the object.
+
+ Returns
+ Object:
+ object that is the result of merging o1 and o2, being o2 properties priority overriding
+existent o1 properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ pick(o, props)
+
+
+
+
+
+
+
+
+
+ Create new object from the inputted one only with the props passed +in the props list.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ o
+
+ (Object)
+ the object to pick props from.
+
+ Returns
+ Object:
+ the object resultant from the picking operation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▸
+ throwErr(component, msg)
+
+
+
+
+
+
+
+
+
+ Helper function for customized error logging.
+ + + + + + + + + + + + + + +Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+ component
+
+ (string)
+ the name of the component where the error is to be thrown.
+
+
+
+
+
+ msg
+
+ (string)
+ the message contain a more detailed explanation about the error.
+
+ Returns
+ Error:
+ the thrown error.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+react-d3-graph
-1.2.01.2.1Quick Links
🔗 GitHub Repo
🔗 Live Demo
Versions
-
-