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.

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

Stop nodes from jiggling at the edges when the graph is being built. #3

Merged
merged 2 commits into from
Mar 14, 2018

Conversation

PamelaM
Copy link
Contributor

@PamelaM PamelaM commented Mar 14, 2018

When the force-directed-graph nodes bumped up against the edges of the display area, they would "jiggle" very unpleasantly. This was due to a poor algorithm that tried to nudge the nodes back towards the inside of the area.

Instead, we now just push nodes back into the display if they try to drift outside of it.

@@ -24,6 +24,7 @@ var LINK_RANDOM = 100;
var LINK_MIN_OFFSET = 25;
var RIM_SIZE = 15;
var NODE_SIZE = 150;
var MARGIN = NODE_SIZE / 2 / 2;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a constant that was being re-calculated regularly, moved it here.

var delta = 1;

// Make sure that all nodes remain within the top and bottom edges
// of the display area
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Rename variables, use the MARGIN constant.

if (d.y < y1) d.y += delta;
if (d.y > y2) d.y -= delta;
});
d.x = largest(min_x, smallest(max_x, d.x))
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is the main fix

@@ -863,7 +864,7 @@ function onNodeMouseOver(node) {

$('g.node').each(function(i, e) {
if (e.__data__ == node) {
$e = $(e);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This fixes an unrelated console error message

@@ -16,3 +16,5 @@ export const radial = (point: Point, radius: number, radians: number): Point =>
y: Math.sin(radians) * radius + point.y
})

export const smallest = (a : number, b : number): number => a < b ? a : b
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Two simple helper functions to make code readable

@PamelaM PamelaM requested a review from adccb March 14, 2018 18:21
@adccb
Copy link
Contributor

adccb commented Mar 14, 2018

looks good to me! thanks for this, pam. :)

@adccb adccb merged commit bdf9e77 into master Mar 14, 2018
@adccb adccb deleted the pm/stop_jiggling_at_the_edges branch March 14, 2018 18:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants