How to draw S-curved arrows between boxes
dragonman225.js.org
How to draw S-curved arrows between boxes
1–10 of 59 posts
Re: How to draw S-curved arrows between boxes
#2I enjoyed reading this because it reminded me of a moment of hubris as junior developer. I was working with a complicated data structure I wanted to visualize, so I decided to write some quick code to basically read the data structure and output a graph as rectangles and lines connecting them.
I was chastened by the complexity of just drawing the lines between boxes so that they didn't overlap (as much as possible) and were drawn on facing sides (one of the later problems discussed in the article). I don't recall how I did it, but I do remember a sudden refresher on matrix multiplication.
It drove home how simple things can be more complicated than you might expect.
EDIT: also, I appreciated the way the article was written. No cruft.
Re: How to draw S-curved arrows between boxes
#3I enjoyed reading this because it reminded me of a moment of hubris as junior developer. I was working with a complicated data structure I wanted to visualize, so I decided to write some quick code to basically read the data structure and output a graph as rectangles and lines connecting them. I was chastened by the complexity of just drawing the lines between boxes so that they didn't overlap (as much as possible) a…
If you want to add another level of complexity, add (non-overlapping) labels to your boxes and arrows ...
Re: How to draw S-curved arrows between boxes
#4Fantastic article. This kind of insight into how people break down complicated problems into more manageable pieces is extremely valuable.
Re: How to draw S-curved arrows between boxes
#5It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.
Re: How to draw S-curved arrows between boxes
#6It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.
> under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections
This is an odd assumption to make.
Re: How to draw S-curved arrows between boxes
#7I enjoyed reading this because it reminded me of a moment of hubris as junior developer. I was working with a complicated data structure I wanted to visualize, so I decided to write some quick code to basically read the data structure and output a graph as rectangles and lines connecting them. I was chastened by the complexity of just drawing the lines between boxes so that they didn't overlap (as much as possible) a…
If you want to add another level of complexity, add (non-overlapping) labels to your boxes and arrows ...
[deleted]
Re: How to draw S-curved arrows between boxes
#8This reminds me of a project I worked on that had an interface with draggable boxes just like this. The library that we used rendered the boxes as divs while the arrows were drawn as SVGs. Apparently there was a bug on Internet Explorer 11 where CSS transforms being applied to SVGs would cause the browser to slow to a crawl, or crash entirely if too many were happening at once.
To get around it, I switched the line drawing function for IE11 so that it would draw two divs that would extend from the middle of each box and touch corners in the middle (basically figure 4 in the article), then style them with a curved border on the appropriate side. While not as elegant as what's shown here, it was convincing enough that nobody noticed any visual difference between it and the regular version.
Re: How to draw S-curved arrows between boxes
#9It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.
In that case the tool would need to lay out everything holistically but while it might do great arrow wise it could be useless for the user if they wanted the diagram a certain way for a reason.
Re: How to draw S-curved arrows between boxes
#10It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.
In that case the tool would need to lay out everything holistically but while it might do great arrow wise it could be useless for the user if they wanted the diagram a certain way for a reason.
Yes, that is what I've noticed too. On medium/big projects macro-level(holistic) arrow functionality is far more important than having beautifully curved arrows from node A to node B. Solving that problem strangely resembles routing on a circuit board with buses, labels, colors, layers etc.