62601

Algorithm to draw connections between nodes without overlapping nodes

Question:

I have a series of nodes in a graph. The nodes are placed by the user in specific spots. The nodes are guaranteed to not overlap and, in fact, to have a buffer of space between them. These nodes are connected and each edge joins to a node at a specific point. I need to draw the edges between the nodes such that the edges:

<ul><li>(required) do not overlap the parent nodes</li> <li>(ideally) would not overlap any node</li> </ul>

I am not worried about edge crossings. Bonus points if there's an implementation of this in Javascript. I am unable to use any libraries outside of Javascript.

Answer1:

One solution could be using <a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" rel="nofollow"><strong>Bézier Curves</strong></a>:

<blockquote>

"A Bézier curve is defined by a set of control points P0 through Pn, where n is called its order (n = 1 for linear, 2 for quadratic, etc.). <strong>The first and last control points are always the end points</strong> of the curve; however, <strong>the intermediate control points (if any) generally do not lie on the curve</strong>."

</blockquote>

So the basic idea is to use parent node(s) as intermediate control points. You may also use points of the edges as intermediate control points to avoid edges overlapping.

In the wiki article you can find nice <a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_B.C3.A9zier_curves" rel="nofollow">animations</a> explaining it.

For <strong>javascript implementation</strong> I took a look at the followings libs:

<ul><li><a href="http://jsdraw2d.jsfiction.com/" rel="nofollow">jsdraw2d</a> (LGPL license) with a <a href="http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm" rel="nofollow">nice demo</a> and well referenced. Implemented it also using <em>HTML5 and SVG</em> for performance (<a href="http://jsdraw2dx.jsfiction.com/" rel="nofollow">jsdraw2dX</a>).</li> <li><a href="http://code.google.com/p/jsbezier/" rel="nofollow">jsbezier</a> on google code </li> </ul>

But if you google <em>"javascript bezier library"</em> you can find more.

Answer2:

If you are familiar with C# and .NET you can explore Microsoft.GLEE library (description is <a href="http://research.microsoft.com/en-us/downloads/f1303e46-965f-401a-87c3-34e1331d32c5/default.aspx" rel="nofollow">here</a> and <a href="http://research.microsoft.com/pubs/64284/gd2007-glee.pdf" rel="nofollow">here</a>) via ILSpy, or even theoretically save this sources to .csproj, modify and recompile it with <a href="http://scriptsharp.com/" rel="nofollow">Script#</a> to JavaScript.

Recommend

  • How to clip non-closed geometry
  • R macros to enable user defined input similar to %let in SAS
  • Undestanding UIBezierPath curving mechanism, controlPoint and the curve point
  • How to wait until a cmd command ends until performing the next task?
  • stop matlab line plots from overlapping
  • Coincidence matrix from array with clusters assignments
  • Downloading files from Servlets - Chrome warning + how to redirect user after download?
  • node require() versus es6 import: why doesn't this example work
  • import inside a function: is memory reclaimed upon function exit?
  • Does Resharper contain a Convert to Direct Cast refactoring?
  • Self executing function inheritance
  • SQL query solution for getting statistics from my tables
  • Datediff function in Sql does not give accurate hour value
  • regex for a particular date format
  • itunes listening to
  • Is there a way not to use dynamic when instantiating a type that inherits from generic?
  • Winforms: Browser-like TabControl
  • What is the best way to draw a large number of lines using openGL and cocos2D?
  • How can I properly import the environment from running a subcommand in Perl?
  • Creating interactive contour plots on Android
  • Stream data into rotating log tables in BigQuery
  • How to combine different figures in a Matlab script?
  • Find generic sub-lists within a list
  • Combine multiple awk output to print on one line
  • Prevent SQL Injection in Dynamic column names
  • include dlls in visual studio c++ 2008
  • react split panel resize
  • Can you pass an array from javascript to asp.net mvc controller action without using a form?
  • Unable to install Git-core+svn by MacPorts
  • Unable to decode certificate at client new X509Certificate2()
  • The plugin 'org.apache.maven.plugins:maven-jboss-as-plugin' does not exist or no valid ver
  • Launch Runnable Jar from Web Start
  • Excel - Autoshape get it's name from cell (value)
  • Updating server-side rendering client-side
  • Check if a string to interpolate provides expected placeholders
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • RestKit - RKRequestDelegate does not exist
  • Traverse Array and Display in markup
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)