-
Notifications
You must be signed in to change notification settings - Fork 0
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
Conversation
@@ -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; |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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)) |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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
looks good to me! thanks for this, pam. :) |
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.