Crickets Chirping

Gordon pointed me at this last week: Kyle Sholz’s force-directed graph layout implementation written in JavaScript/DHTML. It works in every browser I’ve tried. I’m quite impresssed. I didn’t think that could work.

One nit (for me at least) is that it draws edge lines as a series of dots. This is fine, until you stretch them. The number of dots is constant so they move further and further apart. Also if you have lots of edges crossing eachother it becomes difficult to determine if two nodes are connected because the cloud of dots between them may or may not represent an edge between them.

The dots are an understandable and clever workaround for JavaScript since there’s no drawLine() function in DHTML.

Or is there?

hehehehe

I combined Walter Zorn’s JS vector graphics library (which I blogged about almost a year ago) with Sholz’s code, and viola. Force-directed graph layout in javascript with lines for edges.

See it in action here.

Or just download the files I changed/added:

• domui.js – modified to use the jsGraphics object instead of dotted lines.
• example01.html – added a script include for wz_jsgraphics.js and a dedicated div for jsGraphics (otherwise it clobbers the node dhtml and all you see are edges).
• wz_jsgraphics.js – Walter Zorn’s vector graphics library