diff --git a/README.md b/README.md index c96c1726e..e195d2915 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -# react-d3-graph · [![Build Status](https://travis-ci.org/danielcaldas/react-d3-graph.svg?branch=master)](https://travis-ci.org/danielcaldas/react-d3-graph) [![npm version](https://img.shields.io/badge/npm-v1.0.0-blue.svg)](https://www.npmjs.com/package/react-d3-graph) [![npm stats](https://img.shields.io/badge/downloads-2k-brightgreen.svg)](https://npm-stat.com/charts.html?package=react-d3-graph&from=2017-04-25&to=2018-02-11) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg)](https://probot.github.io/) [![trello](https://img.shields.io/badge/trello-board-blue.svg)](https://trello.com/b/KrnmFXha/react-d3-graph) -:book: [1.0.0](https://danielcaldas.github.io/react-d3-graph/docs/index.html) | [0.4.0](https://danielcaldas.github.io/react-d3-graph/docs/0.4.0.html) | [0.3.0](https://danielcaldas.github.io/react-d3-graph/docs/0.3.0.html) +# react-d3-graph · [![Build Status](https://travis-ci.org/danielcaldas/react-d3-graph.svg?branch=master)](https://travis-ci.org/danielcaldas/react-d3-graph) [![npm version](https://img.shields.io/badge/npm-v1.0.1-blue.svg)](https://www.npmjs.com/package/react-d3-graph) [![npm stats](https://img.shields.io/badge/downloads-2k-brightgreen.svg)](https://npm-stat.com/charts.html?package=react-d3-graph&from=2017-04-25&to=2018-02-11) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg)](https://probot.github.io/) [![trello](https://img.shields.io/badge/trello-board-blue.svg)](https://trello.com/b/KrnmFXha/react-d3-graph) +:book: [1.0.1](https://danielcaldas.github.io/react-d3-graph/docs/index.html) | [1.0.0](https://danielcaldas.github.io/react-d3-graph/docs/1.0.0.html) | [0.4.0](https://danielcaldas.github.io/react-d3-graph/docs/0.4.0.html) | [0.3.0](https://danielcaldas.github.io/react-d3-graph/docs/0.3.0.html) ### *Interactive and configurable graphs with react and d3 effortlessly* diff --git a/RELEASE_PROCESS.md b/RELEASE_PROCESS.md index 5be2fde97..6f06adb6b 100644 --- a/RELEASE_PROCESS.md +++ b/RELEASE_PROCESS.md @@ -3,15 +3,20 @@ This is not yet a full automated process, so here are a few steps to get the thing properly released on github and publish under npm registry. +### Setup (serve a local version to run tests against it) +1. npm run dist:sandbox +2. npm run start +### Release steps 1. npm run dist 2. npm run docs:lint (fix if errors) 3. Update versioning in package.json 4. npm run docs 5. Small tweaks on documentation page (quicklinks) 6. Replace current files in docs for the generated ones in gen-docs -7. git commit -m "Release x.x.x" -8. Create release x.x.x in github -9. git pull (origin master) -10. Generate CHANGELOG.md (github_changelog_generator -u GITHUB_USERNAME) -11. git commit -m "Update CHANGELOG" -12. npm publish +7. Update README links to documentation +8. git commit -m "Release x.x.x" +9. Create release x.x.x in github +10. git pull (origin master) +11. Generate CHANGELOG.md (github_changelog_generator -u GITHUB_USERNAME) +12. git commit -m "Update CHANGELOG" +13. npm publish diff --git a/docs/0.3.0.html b/docs/0.3.0.html index 5e86452a9..4d0eff957 100644 --- a/docs/0.3.0.html +++ b/docs/0.3.0.html @@ -21,7 +21,8 @@

🔗 Live Demo

Versions
diff --git a/docs/0.4.0.html b/docs/0.4.0.html index 83012bfc5..acf688d04 100644 --- a/docs/0.4.0.html +++ b/docs/0.4.0.html @@ -21,7 +21,8 @@

🔗 Live Demo

Versions
diff --git a/docs/1.0.0.html b/docs/1.0.0.html new file mode 100644 index 000000000..a919f85b3 --- /dev/null +++ b/docs/1.0.0.html @@ -0,0 +1,4379 @@ + + + + + react-d3-graph 1.0.0 | Documentation + + + + + + + +
+
+
+

react-d3-graph

+ +
1.0.0
+

Quick Links

+

🔗 GitHub Repo

+

🔗 Live Demo

+
Versions
+ + + +
+ Need help reading this? +
+
+
+
+ + +
+ + +
+ +

+ 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

+ + +
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. + +
+ +
+ +
+
+ panAndZoom (boolean + = false) + 🚅🚅🚅 pan and zoom effect when performing zoom in the graph, +a similar functionality may be consulted +here +. + +
+ +
+ +
+
+ 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. + +
+ +
+ +
+
+ width (number + = 800) + the width of the (svg) area where the graph will be rendered. + +
+ +
+ +
+ +
+
+ node (Object) + node object is explained in next section. ⬇️ +

Node level configurations

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
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.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.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): +
    +
  • 'circle'
    • +
  • 'cross'
    • +
  • 'diamond'
    • +
  • 'square'
    • +
  • 'star'
    • +
  • 'triangle'
    • +
  • 'wye'
    • +
+

[note] react-d3-graph will map this values to d3 symbols

+
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. + +
+
+ +
+ +
+
+ link (Object) + link object is explained in the next section. ⬇️ +

Link level configurations

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
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 🥔.
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ Node/helper +

+ + +
+ + +

Some methods that help no the process of rendering a node.

+ + +
Node/helper
+ + + + + + + + + + + + + + + + + + + + + +
Static Members
+
+ +
+
+
+ ▸ + _convertTypeToD3Symbol(typeName) +
+
+ +
+ +
+
+
+ ▸ + buildSvgSymbol(size, symbolTypeDesc) +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ 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 +
+
+ +
+ +
+
+
+ ▸ + _onDragMove +
+
+ +
+ +
+
+
+ ▸ + _onDragStart +
+
+ +
+ +
+
+
+ ▸ + _setNodeHighlightedValue +
+
+ +
+ +
+
+
+ ▸ + _tick +
+
+ +
+ +
+
+
+ ▸ + _zoomConfig +
+
+ +
+ +
+
+
+ ▸ + _zoomed +
+
+ +
+ +
+
+
+ ▸ + onMouseOverNode +
+
+ +
+ +
+
+
+ ▸ + onMouseOutNode +
+
+ +
+ + + + + +
+
+
+ ▸ + pauseSimulation +
+
+ +
+ +
+
+
+ ▸ + resetNodesPositions +
+
+ +
+ +
+
+
+ ▸ + restartSimulation +
+
+ +
+ +
+ + + + +
+ + + + +
+ + +
+ +

+ Graph/helper +

+ + +
+ + +

Offers a series of methods that isolate logic of Graph component.

+ + +
Graph/helper
+ + + + + + + + + + + + + + + + + + + + + +
Static Members
+
+ +
+
+
+ ▸ + Node +
+
+ +
+ + + +
+
+
+ ▸ + _buildLinkProps(source, target, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform) +
+
+ +
+ + + +
+
+
+ ▸ + _buildNodeProps(node, config, nodeCallbacks, highlightedNode, highlightedLink, transform) +
+
+ +
+ +
+
+
+ ▸ + _getNodeOpacity(node, highlightedNode, highlightedLink, config) +
+
+ +
+ + + +
+
+
+ ▸ + _initializeNodes(graphNodes) +
+
+ +
+ +
+
+
+ ▸ + _validateGraphData(data) +
+
+ +
+ +
+
+
+ ▸ + buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, highlightedNode, highlightedLink, transform) +
+
+ +
+ +
+
+
+ ▸ + createForceSimulation(width, height) +
+
+ +
+ +
+
+
+ ▸ + initializeGraphState(props, state) +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ 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
+    type='square'
+    className='node'
+    onClickNode={onClickNode}
+    onMouseOverNode={onMouseOverNode}
+    onMouseOutNode={onMouseOutNode} />
+ + + + + + +
Instance Members
+
+ +
+
+
+ ▸ + handleOnClickNode +
+
+ +
+ +
+
+
+ ▸ + handleOnMouseOverNode +
+
+ +
+ +
+
+
+ ▸ + handleOnMouseOutNode +
+
+ +
+ +
+ + + + +
+ + + + +
+ + +
+ + + + +
+ + +

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
+
+ + + + + + + +
+ + + + +
+ + + + +
+ + +
+ +

+ 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) +
+
+ +
+ +
+
+
+ ▸ + isDeepEqual(o1, o2, _depth) +
+
+ +
+ +
+
+
+ ▸ + isObjectEmpty(o) +
+
+ +
+ +
+
+
+ ▸ + merge(o1, o2, _depth) +
+
+ +
+ +
+
+
+ ▸ + throwErr(component, msg) +
+
+ +
+ +
+ + + + + + +
+ + + +
+
+ + + + + diff --git a/docs/DOCUMENTATION.md b/docs/DOCUMENTATION.md index 507bbb031..1624cf1e6 100644 --- a/docs/DOCUMENTATION.md +++ b/docs/DOCUMENTATION.md @@ -3,6 +3,19 @@ ### Table of Contents - [config](#config) +- [Graph/helper](#graphhelper) + - [Link](#link) + - [Node](#node) + - [\_createForceSimulation](#_createforcesimulation) + - [\_getNodeOpacity](#_getnodeopacity) + - [\_initializeLinks](#_initializelinks) + - [\_initializeNodes](#_initializenodes) + - [\_validateGraphData](#_validategraphdata) + - [buildLinkProps](#buildlinkprops) + - [buildNodeProps](#buildnodeprops) + - [initializeGraphState](#initializegraphstate) + - [\_buildNodeLinks](#_buildnodelinks) + - [buildGraph](#buildgraph) - [Node/helper](#nodehelper) - [\_convertTypeToD3Symbol](#_converttypetod3symbol) - [buildSvgSymbol](#buildsvgsymbol) @@ -22,19 +35,7 @@ - [pauseSimulation](#pausesimulation) - [resetNodesPositions](#resetnodespositions) - [restartSimulation](#restartsimulation) -- [Graph/helper](#graphhelper) - - [Node](#node) - - [Link](#link) - - [\_buildLinkProps](#_buildlinkprops) - - [\_buildNodeLinks](#_buildnodelinks) - - [\_buildNodeProps](#_buildnodeprops) - - [\_getNodeOpacity](#_getnodeopacity) - - [\_initializeLinks](#_initializelinks) - - [\_initializeNodes](#_initializenodes) - - [\_validateGraphData](#_validategraphdata) - - [buildGraph](#buildgraph) - - [createForceSimulation](#createforcesimulation) - - [initializeGraphState](#initializegraphstate) +- [Graph/renderer](#graphrenderer) - [Node](#node-1) - [handleOnClickNode](#handleonclicknode) - [handleOnMouseOverNode](#handleonmouseovernode) @@ -49,6 +50,7 @@ - [isObjectEmpty](#isobjectempty) - [merge](#merge) - [throwErr](#throwerr) +- [pick](#pick) ## config @@ -84,49 +86,49 @@ const graph = { **Parameters** -- `automaticRearrangeAfterDropNode` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 when true performing a node drag and drop should automatically +- `automaticRearrangeAfterDropNode` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 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). (optional, default `false`) -- `height` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the height of the (svg) area where the graph will be rendered. (optional, default `400`) -- `nodeHighlightBehavior` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 when user mouse hovers a node that node and adjacent common +- `height` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the height of the (svg) area where the graph will be rendered. (optional, default `400`) +- `nodeHighlightBehavior` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 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**. (optional, default `false`) -- `linkHighlightBehavior` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior +- `linkHighlightBehavior` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 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**). (optional, default `false`) -- `highlightDegree` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** **Possible values: 0, 1 or 2**. This value represents the range of the +- `highlightDegree` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** **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. (optional, default `1`) -- `highlightOpacity` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** this value is used to highlight nodes in the network. The lower +- `highlightOpacity` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** 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_). (optional, default `1`) -- `maxZoom` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** max zoom that can be performed against the graph. (optional, default `8`) -- `minZoom` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** min zoom that can be performed against the graph. (optional, default `0.1`) -- `panAndZoom` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 pan and zoom effect when performing zoom in the graph, +- `maxZoom` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** max zoom that can be performed against the graph. (optional, default `8`) +- `minZoom` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** min zoom that can be performed against the graph. (optional, default `0.1`) +- `panAndZoom` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 🚅🚅🚅 pan and zoom effect when performing zoom in the graph, a similar functionality may be consulted [here](https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39). (optional, default `false`) -- `staticGraph` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** when setting this value to true the graph will be completely static, thus +- `staticGraph` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 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. (optional, default `false`) -- `width` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the width of the (svg) area where the graph will be rendered. +- `width` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the width of the (svg) area where the graph will be rendered.
(optional, default `800`) -- `node` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** node object is explained in next section. ⬇️

Node level configurations

- - `node.color` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 🔍🔍🔍 this is the color that will be applied to the node if no **color property** +- `node` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** node object is explained in next section. ⬇️

Node level configurations

+ - `node.color` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 🔍🔍🔍 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**). (optional, default `'#d3d3d3'`) - - `node.fontSize` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control) + - `node.fontSize` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control) property for all nodes' labels. (optional, default `10`) - - `node.fontWeight` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** [font-weight](https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control) + - `node.fontWeight` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** [font-weight](https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control) property for all nodes' labels. (optional, default `'normal'`) - - `node.labelProperty` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** this is the node property that will be used in runtime to + - `node.labelProperty` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 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'**. (optional, default `'id'`) - - `node.mouseCursor` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** [cursor](https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control) + - `node.mouseCursor` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** [cursor](https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control) property for when some node is mouse hovered. (optional, default `'pointer'`) - - `node.opacity` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** by default all nodes will have this opacity value. (optional, default `1`) - - `node.renderLabel` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** when set to false no labels will appear along side nodes in the + - `node.opacity` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** by default all nodes will have this opacity value. (optional, default `1`) + - `node.renderLabel` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** when set to false no labels will appear along side nodes in the graph. (optional, default `true`) - - `node.size` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 🔍🔍🔍 defines the size of all nodes. (optional, default `200`) - - `node.strokeColor` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** color for the stroke of each node. (optional, default `'none'`) - - `node.strokeWidth` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the width of the all node strokes. (optional, default `1.5`) - - `node.symbolType` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 🔍🔍🔍 the shape of the node. + - `node.size` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** 🔍🔍🔍 defines the size of all nodes. (optional, default `200`) + - `node.strokeColor` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** color for the stroke of each node. (optional, default `'none'`) + - `node.strokeWidth` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the width of the all node strokes. (optional, default `1.5`) + - `node.symbolType` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 🔍🔍🔍 the shape of the node. Use the following values under a property **type** inside each node (nodes may have different types, same as colors):- 'circle' - 'cross' - 'diamond' @@ -134,26 +136,26 @@ const graph = { - 'star' - 'triangle' - 'wye'**[note]** react-d3-graph will map this values to [d3 symbols](https://github.com/d3/d3-shape#symbols) (optional, default `'circle'`) - - `node.highlightColor` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** color for all highlighted nodes (use string 'SAME' if you + - `node.highlightColor` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** color for all highlighted nodes (use string 'SAME' if you want the node to keep its color in highlighted state). (optional, default `'SAME'`) - - `node.highlightFontSize` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** fontSize in highlighted state. (optional, default `8`) - - `node.highlightFontWeight` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** fontWeight in highlighted state. (optional, default `'normal'`) - - `node.highlightStrokeColor` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** strokeColor in highlighted state. (optional, default `'SAME'`) - - `node.highlightStrokeWidth` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** strokeWidth in highlighted state. + - `node.highlightFontSize` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** fontSize in highlighted state. (optional, default `8`) + - `node.highlightFontWeight` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** fontWeight in highlighted state. (optional, default `'normal'`) + - `node.highlightStrokeColor` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** strokeColor in highlighted state. (optional, default `'SAME'`) + - `node.highlightStrokeWidth` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** strokeWidth in highlighted state.
(optional, default `1.5`) -- `link` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** link object is explained in the next section. ⬇️

Link level configurations

- - `link.color` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the color for links. (optional, default `'#d3d3d3'`) - - `link.opacity` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the default opacity value for links. (optional, default `1`) - - `link.semanticStrokeWidth` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** when set to true all links will have +- `link` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** link object is explained in the next section. ⬇️

Link level configurations

+ - `link.color` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the color for links. (optional, default `'#d3d3d3'`) + - `link.opacity` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the default opacity value for links. (optional, default `1`) + - `link.semanticStrokeWidth` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 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:```javascript strokeWidth += (linkValue * strokeWidth) / 10; ``` (optional, default `false`) - - `link.strokeWidth` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** strokeWidth for all links. By default the actual value is obtain by the + - `link.strokeWidth` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** strokeWidth for all links. By default the actual value is obtain by the following expression:```javascript link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value ``` (optional, default `1.5`) - - `link.highlightColor` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** links' color in highlight state. (optional, default `'#d3d3d3'`) + - `link.highlightColor` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** links' color in highlight state. (optional, default `'#d3d3d3'`) **Examples** @@ -174,6 +176,207 @@ const myConfig = { // 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. + +### Link + +Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) + +**Properties** + +- `source` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the node id of the source in the link. +- `target` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the node id of the target in the link. + +### Node + +Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) + +**Properties** + +- `id` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the node. +- `color` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** color of the node (optional). +- `size` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** size of the node (optional). +- `symbolType` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** symbol type of the node (optional). + +### \_createForceSimulation + +Create d3 forceSimulation to be applied on the graph.
+[d3-force#forceSimulation](https://github.com/d3/d3-force#forceSimulation)
+[d3-force#simulation_force](https://github.com/d3/d3-force#simulation_force)
+Wtf is a force? [ here](https://github.com/d3/d3-force#forces) + +**Parameters** + +- `width` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the width of the container area of the graph. +- `height` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the height of the container area of the graph. + +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns the simulation instance to be consumed. + +### \_getNodeOpacity + +Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node. + +**Parameters** + +- `node` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the node object for whom we will generate properties. +- `highlightedNode` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). +- `highlightedLink` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). +- `config` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). + +Returns **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the opacity value for the given node. + +### \_initializeLinks + +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** + +- `graphLinks` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Link](#link)>** an array of all graph links. + +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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 + +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** + +- `graphNodes` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Node](#node)>** the array of nodes provided by the rd3g consumer. + +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** returns the nodes ready to be used within rd3g with additional properties such as x, y +and highlighted values. + +### \_validateGraphData + +Some integrity validations on links and nodes structure. If some validation fails the function will +throw an error. + +**Parameters** + +- `data` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Same as [data in initializeGraphState](#initializeGraphState). + + +- Throws **any** can throw the following error msg: + INSUFFICIENT_DATA - msg if no nodes are provided + INVALID_LINKS - if links point to nonexistent nodes + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + +### buildLinkProps + +Build some Link properties based on given parameters. + +**Parameters** + +- `source` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the source node (from). +- `target` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the target node (to). +- `nodes` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [nodes in buildGraph](#buildGraph). +- `links` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [links in buildGraph](#buildGraph). +- `config` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). +- `linkCallbacks` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)>** same as [linkCallbacks in buildGraph](#buildGraph). +- `highlightedNode` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). +- `highlightedLink` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). +- `transform` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. + +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns an object that aggregates all props for creating respective Link component instance. + +### buildNodeProps + +Build some Node properties based on given parameters. + +**Parameters** + +- `node` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the node object for whom we will generate properties. +- `config` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). +- `nodeCallbacks` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)>** same as [nodeCallbacks in buildGraph](#buildGraph). (optional, default `{}`) +- `highlightedNode` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). +- `highlightedLink` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). +- `transform` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. + +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns object that contain Link props ready to be feeded to the Link component. + +### initializeGraphState + +Encapsulates common procedures to initialize graph. + +**Parameters** + +- `props` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Graph component props, object that holds data, id and config. + - `props.data` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Data object holds links (array of **Link**) and nodes (array of **Node**). + - `props.id` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the graph id. + - `props.config` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). +- `state` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Graph component current state (same format as returned object on this function). + +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** a fully (re)initialized graph state object. + +### \_buildNodeLinks + +Build Link components for a given node. + +**Parameters** + +- `nodeId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the node to whom Link components will be generated. +- `nodes` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [nodes in buildGraph](#buildGraph). +- `links` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [links in buildGraph](#buildGraph). +- `config` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). +- `linkCallbacks` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)>** same as [linkCallbacks in buildGraph](#buildGraph). +- `highlightedNode` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). +- `highlightedLink` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). +- `transform` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. + +Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** returns the generated array of Link components. + +### buildGraph + +Method that actually is exported an consumed by Graph component in order to build all Nodes and Link +components. + +**Parameters** + +- `nodes` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** an object containing all nodes mapped by their id. +- `nodeCallbacks` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)>** array of callbacks for used defined event handler for node interactions. +- `links` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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).```javascript + // 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 + }, + ... + } + ``` +- `linkCallbacks` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)>** array of callbacks for used defined event handler for link interactions. +- `config` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** an object containing rd3g consumer defined configurations [config](#config) for the graph. +- `highlightedNode` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** this value contains a string that represents the some currently highlighted node. +- `highlightedLink` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** this object contains a source and target property for a link that is highlighted at some point in time. + - `highlightedLink.source` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of source node for highlighted link. + - `highlightedLink.target` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of target node for highlighted link. +- `transform` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. + +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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. @@ -186,9 +389,9 @@ of d3 symbol.
**Parameters** -- `typeName` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the string that specifies the symbol type (should be one of [node.symbolType](#node-symbol-type)). +- `typeName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the string that specifies the symbol type (should be one of [node.symbolType](#node-symbol-type)). -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** concrete instance of d3 symbol (defaults to circle). +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** concrete instance of d3 symbol (defaults to circle). ### buildSvgSymbol @@ -196,11 +399,11 @@ Build a d3 svg symbol based on passed symbol and symbol type. **Parameters** -- `size` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the size of the symbol. (optional, default `80`) -- `symbolTypeDesc` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the string containing the type of symbol that we want to build +- `size` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the size of the symbol. (optional, default `80`) +- `symbolTypeDesc` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the string containing the type of symbol that we want to build (should be one of [node.symbolType](#node-symbol-type)). (optional, default `'circle'`) -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** concrete instance of d3 symbol. +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** concrete instance of d3 symbol. ## Graph @@ -288,49 +491,68 @@ const onMouseOutLink = function(source, target) { Sets d3 tick function and configures other d3 stuff such as forces and drag events. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### \_onDragEnd Handles d3 drag 'end' event. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### \_onDragMove Handles d3 'drag' event. +[more about d3 drag](https://github.com/d3/d3-drag/blob/master/README.md#drag_subject) **Parameters** -- `ev` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** if not undefined it will contain event data. -- `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of the node that is being dragged. -- `nodeList` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** array of d3 nodes. This list of nodes is provided by d3, each - node contains all information that was previously fed by rd3g.[more about d3 drag](https://github.com/d3/d3-drag/blob/master/README.md#drag_subject) +- `ev` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** if not undefined it will contain event data. +- `index` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of the node that is being dragged. +- `nodeList` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)>** array of d3 nodes. This list of nodes is provided by d3, each + node contains all information that was previously fed by rd3g. + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** ### \_onDragStart Handles d3 drag 'start' event. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### \_setNodeHighlightedValue Sets nodes and links highlighted value. **Parameters** -- `id` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the node to highlight. -- `value` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** the highlight value to be set (true or false). (optional, default `false`) +- `id` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the node to highlight. +- `value` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** the highlight value to be set (true or false). (optional, default `false`) + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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. +**Parameters** + +- `state` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** new state to pass on. + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### \_zoomConfig Configures zoom upon graph with default or user provided values.
+Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### \_zoomed Handler for 'zoom' event within zoom config. -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns the transformed elements within the svg graph area. +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns the transformed elements within the svg graph area. ### onMouseOverNode @@ -338,7 +560,9 @@ Handles mouse over node event. **Parameters** -- `id` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the node that participates in the event. +- `id` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the node that participates in the event. + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** ### onMouseOutNode @@ -346,7 +570,9 @@ Handles mouse out node event. **Parameters** -- `id` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the node that participates in the event. +- `id` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the node that participates in the event. + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** ### onMouseOverLink @@ -354,8 +580,10 @@ Handles mouse over link event. **Parameters** -- `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the source node that participates in the event. -- `target` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the target node that participates in the event. +- `source` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the source node that participates in the event. +- `target` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the target node that participates in the event. + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** ### onMouseOutLink @@ -363,221 +591,36 @@ Handles mouse out link event. **Parameters** -- `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the source node that participates in the event. -- `target` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the target node that participates in the event. +- `source` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the source node that participates in the event. +- `target` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** id of the target node that participates in the event. + +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** ### pauseSimulation Calls d3 simulation.stop().
+Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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). +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### restartSimulation Calls d3 simulation.restart().
-## Graph/helper - -Offers a series of methods that isolate logic of Graph component. - -### Node +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** -Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) - -**Properties** +## Graph/renderer -- `id` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the node. - -### Link - -Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) - -**Properties** - -- `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the node id of the source in the link. -- `target` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the node id of the target in the link. - -### \_buildLinkProps - -Build some Link properties based on given parameters. - -**Parameters** - -- `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the source node (from). -- `target` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the target node (to). -- `nodes` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [nodes in buildGraph](#buildGraph). -- `links` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [links in buildGraph](#buildGraph). -- `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). -- `linkCallbacks` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)>** same as [linkCallbacks in buildGraph](#buildGraph). -- `highlightedNode` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). -- `highlightedLink` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). -- `transform` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. - -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns an object that aggregates all props for creating respective Link component instance. - -### \_buildNodeLinks - -Build Link components for a given node. - -**Parameters** - -- `nodeId` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the id of the node to whom Link components will be generated. -- `nodes` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [nodes in buildGraph](#buildGraph). -- `links` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** same as [links in buildGraph](#buildGraph). -- `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). -- `linkCallbacks` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)>** same as [linkCallbacks in buildGraph](#buildGraph). -- `highlightedNode` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). -- `highlightedLink` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). -- `transform` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. - -Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** returns the generated array of Link components. - -### \_buildNodeProps - -Build some Node properties based on given parameters. - -**Parameters** - -- `node` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** the node object for whom we will generate properties. -- `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). -- `nodeCallbacks` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)>** same as [nodeCallbacks in buildGraph](#buildGraph). -- `highlightedNode` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). -- `highlightedLink` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). -- `transform` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. - -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns object that contain Link props ready to be feeded to the Link component. - -### \_getNodeOpacity - -Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node. - -**Parameters** - -- `node` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** the node object for whom we will generate properties. -- `highlightedNode` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** same as [highlightedNode in buildGraph](#buildGraph). -- `highlightedLink` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [highlightedLink in buildGraph](#buildGraph). -- `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). - -Returns **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the opacity value for the given node. - -### \_initializeLinks - -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** - -- `graphLinks` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** an array of all graph links but all the links contain the source and target nodes - objects. - -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 - -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** - -- `graphNodes` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** the array of nodes provided by the rd3g consumer. - -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns the nodes ready to be used within rd3g with additional properties such as x, y -and highlighted values. - -### \_validateGraphData - -Some integrity validations on links and nodes structure. If some validation fails the function will -throw an error. - -**Parameters** - -- `data` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Same as [data in initializeGraphState](#initializeGraphState). - - -- Throws **any** can throw the following error msg: - INSUFFICIENT_DATA - msg if no nodes are provided - INVALID_LINKS - if links point to nonexistent nodes - -### buildGraph - -Method that actually is exported an consumed by Graph component in order to build all Nodes and Link -components. - -**Parameters** - -- `nodes` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** an object containing all nodes mapped by their id. -- `nodeCallbacks` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)>** array of callbacks for used defined event handler for node interactions. -- `links` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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).```javascript - // 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 - }, - ... - } - ``` -- `linkCallbacks` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)>** array of callbacks for used defined event handler for link interactions. -- `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** an object containing rd3g consumer defined configurations [config](#config) for the graph. -- `highlightedNode` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** this value contains a string that represents the some currently highlighted node. -- `highlightedLink` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** this object contains a source and target property for a link that is highlighted at some point in time. - - `highlightedLink.source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of source node for highlighted link. - - `highlightedLink.target` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** id of target node for highlighted link. -- `transform` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** value that indicates the amount of zoom transformation. - -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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**. - -### createForceSimulation - -Create d3 forceSimulation to be applied on the graph.
-[d3-force#forceSimulation](https://github.com/d3/d3-force#forceSimulation)
-[d3-force#simulation_force](https://github.com/d3/d3-force#simulation_force)
-Wtf is a force? [ here](https://github.com/d3/d3-force#forces) - -**Parameters** - -- `width` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the width of the container area of the graph. -- `height` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the height of the container area of the graph. - -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** returns the simulation instance to be consumed. - -### initializeGraphState - -Encapsulates common procedures to initialize graph. - -**Parameters** - -- `props` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Graph component props, object that holds data, id and config. - - `props.data` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Data object holds links (array of **Link**) and nodes (array of **Node**). - - `props.id` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the graph id. - - `props.config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** same as [config in buildGraph](#buildGraph). -- `state` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Graph component current state (same format as returned object on this function). - -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** a fully (re)initialized graph state object. +Offers a series of methods that isolate render logic for Graph component. ## Node @@ -625,14 +668,20 @@ const onMouseOutNode = function(nodeId) { Handle click on the node. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### handleOnMouseOverNode Handle mouse over node event. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### handleOnMouseOutNode Handle mouse out node event. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ## Link **Extends React.Component** @@ -674,14 +723,20 @@ const onMouseOutLink = function(source, target) { Handle link click event. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### handleOnMouseOverLink Handle mouse over link event. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ### handleOnMouseOutLink Handle mouse out link event. +Returns **[undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined)** + ## utils Offers a series of generic methods for object manipulation, and other operations @@ -693,10 +748,10 @@ Checks whether a certain object property is from object type and is a non empty **Parameters** -- `o` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** the object. -- `k` **([number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) \| [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** the object property. +- `o` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the object. +- `k` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the object property. -Returns **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** returns true if o[k] is an non empty object. +Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** returns true if o[k] is an non empty object. ### isDeepEqual @@ -704,11 +759,11 @@ Generic deep comparison between javascript simple or complex objects. **Parameters** -- `o1` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** one of the objects to be compared. -- `o2` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** second object to compare with first. -- `_depth` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** this parameter serves only for internal usage. (optional, default `0`) +- `o1` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** one of the objects to be compared. +- `o2` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** second object to compare with first. +- `_depth` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** this parameter serves only for internal usage. (optional, default `0`) -Returns **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** returns true if o1 and o2 have exactly the same content, or are exactly the same object reference. +Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** returns true if o1 and o2 have exactly the same content, or are exactly the same object reference. ### isObjectEmpty @@ -717,9 +772,9 @@ NOTE: If the passed parameter is not an object the method return false. **Parameters** -- `o` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** object whom emptiness we want to check. +- `o` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** object whom emptiness we want to check. -Returns **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** true if the given object is n ft and object and is empty. +Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** true if the given object is n ft and object and is empty. ### merge @@ -728,11 +783,11 @@ if o2 doesn't posses some o1 property the fallback will be the o1 property. **Parameters** -- `o1` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** object. (optional, default `{}`) -- `o2` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** object that will override o1 properties. (optional, default `{}`) +- `o1` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** object. (optional, default `{}`) +- `o2` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** object that will override o1 properties. (optional, default `{}`) - `_depth` **int** the depth at which we are merging the object. (optional, default `0`) -Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** object that is the result of merging o1 and o2, being o2 properties priority overriding +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** object that is the result of merging o1 and o2, being o2 properties priority overriding existent o1 properties. ### throwErr @@ -741,7 +796,19 @@ Helper function for customized error logging. **Parameters** -- `component` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the component where the error is to be thrown. -- `msg` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the message contain a more detailed explanation about the error. +- `component` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the component where the error is to be thrown. +- `msg` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the message contain a more detailed explanation about the error. + +Returns **[Error](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error)** the thrown error. + +## pick + +Create new object from the inputted one only with the props passed +in the props list. + +**Parameters** + +- `o` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the object to pick props from. +- `props` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** list of props that we want to pick from o. -Returns **[Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)** the thrown error. +Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the object resultant from the picking operation. diff --git a/docs/index.html b/docs/index.html index 284bd64f4..20df278ba 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,7 +2,7 @@ - react-d3-graph 1.0.0 | Documentation + react-d3-graph 1.0.1 | Documentation @@ -15,13 +15,14 @@

react-d3-graph

-
1.0.0
+
1.0.1

Quick Links

🔗 GitHub Repo

🔗 Live Demo

Versions
@@ -481,7 +482,7 @@

Graph global configurations

- automaticRearrangeAfterDropNode (boolean + 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: @@ -494,7 +495,7 @@

Graph global configurations

- height (number + height (number = 400) the height of the (svg) area where the graph will be rendered. @@ -504,7 +505,7 @@

Graph global configurations

- nodeHighlightBehavior (boolean + nodeHighlightBehavior (boolean = false) 🚅🚅🚅 when user mouse hovers a node that node and adjacent common connections will be highlighted (depending on the @@ -519,7 +520,7 @@

Graph global configurations

- linkHighlightBehavior (boolean + 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 @@ -538,7 +539,7 @@

Graph global configurations

- highlightDegree (number + highlightDegree (number = 1) Possible values: 0, 1 or 2 . This value represents the range of the @@ -558,7 +559,7 @@

Graph global configurations

- highlightOpacity (number + 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 @@ -571,7 +572,7 @@

Graph global configurations

- maxZoom (number + maxZoom (number = 8) max zoom that can be performed against the graph. @@ -581,7 +582,7 @@

Graph global configurations

- minZoom (number + minZoom (number = 0.1) min zoom that can be performed against the graph. @@ -591,7 +592,7 @@

Graph global configurations

- panAndZoom (boolean + panAndZoom (boolean = false) 🚅🚅🚅 pan and zoom effect when performing zoom in the graph, a similar functionality may be consulted @@ -604,7 +605,7 @@

Graph global configurations

- staticGraph (boolean + 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 @@ -619,7 +620,7 @@

Graph global configurations

- width (number + width (number = 800) the width of the (svg) area where the graph will be rendered. @@ -631,7 +632,7 @@

Graph global configurations

- node (Object) + node (Object) node object is explained in next section. ⬇️

Node level configurations

@@ -651,7 +652,7 @@

Node level configurations

- node.color string + node.color string (default '#d3d3d3') @@ -666,7 +667,7 @@

Node level configurations

- node.fontSize number + node.fontSize number (default 10) @@ -677,7 +678,7 @@

Node level configurations

- node.fontWeight string + node.fontWeight string (default 'normal') @@ -688,7 +689,7 @@

Node level configurations

- node.labelProperty string + node.labelProperty string (default 'id') @@ -701,7 +702,7 @@

Node level configurations

- node.mouseCursor string + node.mouseCursor string (default 'pointer') @@ -712,7 +713,7 @@

Node level configurations

- node.opacity number + node.opacity number (default 1) @@ -721,7 +722,7 @@

Node level configurations

- node.renderLabel boolean + node.renderLabel boolean (default true) @@ -731,7 +732,7 @@

Node level configurations

- node.size number + node.size number (default 200) @@ -740,7 +741,7 @@

Node level configurations

- node.strokeColor string + node.strokeColor string (default 'none') @@ -749,7 +750,7 @@

Node level configurations

- node.strokeWidth number + node.strokeWidth number (default 1.5) @@ -758,7 +759,7 @@

Node level configurations

- node.symbolType string + node.symbolType string (default 'circle') @@ -784,7 +785,7 @@

Node level configurations

- node.highlightColor string + node.highlightColor string (default 'SAME') @@ -794,7 +795,7 @@

Node level configurations

- node.highlightFontSize number + node.highlightFontSize number (default 8) @@ -803,7 +804,7 @@

Node level configurations

- node.highlightFontWeight string + node.highlightFontWeight string (default 'normal') @@ -812,7 +813,7 @@

Node level configurations

- node.highlightStrokeColor string + node.highlightStrokeColor string (default 'SAME') @@ -821,7 +822,7 @@

Node level configurations

- node.highlightStrokeWidth number + node.highlightStrokeWidth number (default 1.5) @@ -838,7 +839,7 @@

Node level configurations

- link (Object) + link (Object) link object is explained in the next section. ⬇️

Link level configurations

@@ -858,7 +859,7 @@

Link level configurations

- link.color string + link.color string (default '#d3d3d3') @@ -867,7 +868,7 @@

Link level configurations

- link.opacity number + link.opacity number (default 1) @@ -876,7 +877,7 @@

Link level configurations

- link.semanticStrokeWidth boolean + link.semanticStrokeWidth boolean (default false) @@ -890,7 +891,7 @@

Link level configurations

- link.strokeWidth number + link.strokeWidth number (default 1.5) @@ -901,7 +902,7 @@

Link level configurations

- link.highlightColor string + link.highlightColor string (default '#d3d3d3') @@ -959,18 +960,18 @@

Link level configurations

-

- Node/helper +

+ Graph/helper

-

Some methods that help no the process of rendering a node.

+

Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.

-
Node/helper
+
Graph/helper
@@ -995,11 +996,11 @@

Static Members
-
+
▸ - _convertTypeToD3Symbol(typeName) + Node
-
+ -
+
Static Members
+
-