Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Configurable graph force strength and link length #104

Merged
merged 6 commits into from Sep 10, 2018
Merged

Configurable graph force strength and link length #104

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
29029f4
feat: Customize link length
LonelyPrincess Sep 4, 2018
220e379
feat: Configure graph force strength
LonelyPrincess Sep 4, 2018
90179b3
fix: Check if config.node exists before retrieving gravity
LonelyPrincess Sep 4, 2018
187f9f1
feat: All values in D3_CONST are now configurable
LonelyPrincess Sep 8, 2018
a1be545
refactor: Unneeded fallback line removed
LonelyPrincess Sep 10, 2018
34a4c21
fix: Tests failing due to undefined newConfig.d3
LonelyPrincess Sep 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 4 additions & 11 deletions src/components/graph/Graph.jsx
View file
Open in desktop
Expand Up @@ -13,13 +13,6 @@ import * as graphRenderer from './graph.renderer';
import * as graphHelper from './graph.helper';
import utils from '../../utils';

// Some d3 constant values
const D3_CONST = {
FORCE_LINK_STRENGTH: 1,
LINK_IDEAL_DISTANCE: 100,
SIMULATION_ALPHA_TARGET: 0.05
};

/**
* 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).
Expand Down Expand Up @@ -101,8 +94,8 @@ export default class Graph extends React.Component {

const forceLink = d3ForceLink(this.state.d3Links)
.id(l => l.id)
.distance(D3_CONST.LINK_IDEAL_DISTANCE)
.strength(D3_CONST.FORCE_LINK_STRENGTH);
.distance(this.state.config.d3.linkLength)
.strength(this.state.config.d3.linkStrength);

this.state.simulation.force(CONST.LINK_CLASS_NAME, forceLink);

Expand All @@ -123,7 +116,7 @@ export default class Graph extends React.Component {
_onDragEnd = () =>
!this.state.config.staticGraph &&
this.state.config.automaticRearrangeAfterDropNode &&
this.state.simulation.alphaTarget(D3_CONST.SIMULATION_ALPHA_TARGET).restart();
this.state.simulation.alphaTarget(this.state.config.d3.alphaTarget).restart();

/**
* Handles d3 'drag' event.
Expand Down Expand Up @@ -279,7 +272,7 @@ export default class Graph extends React.Component {
}
}

this.state.simulation.alphaTarget(D3_CONST.SIMULATION_ALPHA_TARGET).restart();
this.state.simulation.alphaTarget(this.state.config.d3.alphaTarget).restart();

this._tick();
}
Expand Down
14 changes: 14 additions & 0 deletions src/components/graph/graph.config.js
View file
Open in desktop
Expand Up @@ -54,6 +54,14 @@
* from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
* @param {number} [width=800] - the width of the (svg) area where the graph will be rendered.
* <br/>
* @param {Object} d3 d3 object is explained in next section. ⬇️
* @param {number} [d3.gravity=-100] - this will define how close nodes are to each other.
* - If value is positive, nodes will attract each other.
* - If value is negative, nodes will repel each other. Most of the times this is what we want, so nodes don't overlap.
* @param {number} [d3.linkLength=100] - the length of each link from the center of the nodes it joins.
* @param {number} [d3.linkStrength=1]
* @param {number} [d3.alphaTarget=0.05]
* <br/>
* @param {Object} node node object is explained in next section. ⬇️
* <h2 id="node-section">Node level configurations</h2>
* @param {string} [node.color='#d3d3d3'] - 🔍🔍🔍 this is the color that will be applied to the node if no **color property**
Expand Down Expand Up @@ -150,6 +158,12 @@ export default {
panAndZoom: false,
staticGraph: false,
width: 800,
d3: {
gravity: -100,
linkLength: 100,
linkStrength: 1,
alphaTarget: 0.05
},
node: {
color: '#d3d3d3',
fontColor: 'black',
Expand Down
8 changes: 5 additions & 3 deletions src/components/graph/graph.helper.js
View file
Open in desktop
Expand Up @@ -42,15 +42,17 @@ const NODE_PROPS_WHITELIST = ['id', 'highlighted', 'x', 'y', 'index', 'vy', 'vx'
* Wtf is a force? {@link https://github.com/d3/d3-force#forces| here}
* @param {number} width - the width of the container area of the graph.
* @param {number} height - the height of the container area of the graph.
* @param {number} gravity - the force strength applied to the graph.
* @returns {Object} returns the simulation instance to be consumed.
* @memberof Graph/helper
*/
function _createForceSimulation(width, height) {
function _createForceSimulation(width, height, gravity) {
const frx = d3ForceX(width / 2).strength(CONST.FORCE_X);
const fry = d3ForceY(height / 2).strength(CONST.FORCE_Y);
const forceStrength = gravity || CONST.FORCE_IDEAL_STRENGTH;
LonelyPrincess marked this conversation as resolved.
Show resolved Hide resolved

return d3ForceSimulation()
.force('charge', d3ForceManyBody().strength(CONST.FORCE_IDEAL_STRENGTH))
.force('charge', d3ForceManyBody().strength(forceStrength))
.force('x', frx)
.force('y', fry);
}
Expand Down Expand Up @@ -360,7 +362,7 @@ function initializeGraphState({ data, id, config }, state) {
let links = _initializeLinks(graph.links); // matrix of graph connections
const { nodes: d3Nodes, links: d3Links } = graph;
const formatedId = id.replace(/ /g, '_');
const simulation = _createForceSimulation(newConfig.width, newConfig.height);
const simulation = _createForceSimulation(newConfig.width, newConfig.height, newConfig.d3.gravity);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please check whether some is wrong with this line? Tests for graph.helper are breaking in this property fetch, it seems that newConfig.d3 is undefined. Check this link for more detail.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been taking a look at this and it seems that there are some tests in graph.helper.test.js where config is assigned a string instead of an actual config object. This is what's causing the error to occurr in some of them.

{ config: 'config' }

Since config is not an object at all in this case, newConfig.d3 is undefined, and the same happens with the other two parameters passed down to _createForceSimulation.

Fixing the issue is as simple as checking if newConfig.d3 before trying to access the gravity property.

const simulation = _createForceSimulation(newConfig.width, newConfig.height, newConfig.d3 && newConfig.d3.gravity);

I'll submit a commit with the change in a bit, but I'm curious... Is there any reason why config is taking a string value in these tests? 🤔

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, so in those particular unit tests I was checking for API compatibility I wasn't particularly interested in checking whether config was a string or other data type.


return {
id: formatedId,
Expand Down