Flex: Prefuse Flare Force Directed Graph Demo
Prefuse Flare is a visualisation library for AS3.
This is a demo I have been cobbling together for about a week now. Right click to examine the source code.
I am extremely impressed at how well designed and implemented the Flare library is. There are, however, a few problems.
The edges sometimes get left behind when dragging the graph. I would like to get to the bottom of this as it’s a bit of a showstopper.
The DataSprite class which is a base class for the graph nodes always calls it’s renderer in the constructor. You can reassign the node renderer when you build the graph (to say use images instead, see below) but it’s too late as the node will have draw it’s default shape.
There are also a few things I have added.
- Modified Button class with the ability to anchor it’s position and display tooltip text.
- EdgeLabelLayout ‘operator’ class which keeps EdgeLabel objects positioned at the mid-point of the graph edges.
- ShapePalette and ImageRenderer classes to implement rendering PNGs on the nodes. I have left the functionality switched-out for now as the library code always renders the default node shape regardless if you plug in a different node renderer.
This is a bit of a try-out to see if I could reimplement the Social Graph Browser with a different graph component. I really like the Flare library and hope to use it more.
Update #1
The issue with the DragControl has been resolved. You can pass in a predefined filter function to limit the items which can be selected:
new DragControl(this,Filters.isNodeSprite);
Right-click to view updated source.
Comments
8 Responses to “Flex: Prefuse Flare Force Directed Graph Demo”
Leave a Reply
Hi Al,
Thanks for an awesome demo.
I am currently trying to incorporate your concepts into the Flare ‘graphView’ demo. If you are familiar with this demo, I’m having an issue getting your simulation to run twice. I have it set to run once the user clicks on ‘ForceDirectedLayout’ — the first time it works beautifully, but if I click another layout, then come back to this option, it just shrivels up.
Do you have any thoughts as to why this could be happening?
- Dave
Hello Dave,
I have seen this before. I think it’s something to do with having to apply the ‘RadialTreeLayout’ layout to the graph before displaying. This make the nodes spring out before the ‘ForceDirectedLayout’ is applied. I am mystified why the ‘graphView’ demo works okay and this doesn’t.
Send me your code in a zip file if you can’t resolve it and I will have a look at it (email in the ‘About me’ page).
Another good resource is Martin on the Prefuse Flare sourceforge forum. He seems a great deal more knowledgeable about this stuff than me.
Al.
Thanks, Al! I saw the post — Martin is good! I just thought I’d give you first crack at it, since it is your code.
I totally agree with you…it’s like they compress but won’t spring out. I will send you an email with my zip in it; thanks in advance!
Just a word of warning, I had to change the name of ‘Button.as’ to ‘Button_2.as’ as it was causing a conflict with another project I was working on.
hi Al,
This is Jeff, of the Prefuse and Flare projects. Glad you are enjoying Flare, and thanks for pointing out the issues. I’ve made a number of recent fixes that should help, including better force directed layout (faster and more stable for large graphs), an updated drag control (hopefully those lagging edges are a thing of the past), and slight updates to how rendering is handled (I’ve tested this and have plugged in new renderers without any problems). These fixes are in the Flare Subversion repo (svn.prefuse.org/flare/trunk/flare) and will be out with the next release…
cheers,
-jeff
Cheers Jeff. I will try out the changes.
Al.
Hi AI,
I refer your method to put my flare visualization by flex.
But I meet some strange problem.
I create the same visualization by flex and AS project.
In AS version, it is no problem.
In flex version, nodes display in the beginning and edges display during a period of time.
Do you meet such problem in flex???
My visualization:
1) AS version
http://clover.csie.org/~janetyc/flex/TestGraph/TestGraph.html
2) Flex version
http://clover.csie.org/~janetyc/flex/TestGraphRIA/TestGraphRIA.html
Thanks a lot..
- janet
hi,
i’m trying to add edge labels but i can’t make it move, e.y1, e.y2 is returning NaN.
why did you setup return true to edge’s visit?
ah, i can see the labels, they just don’t update
Oh man, it’s been ages since I looked at this. I would have to familiarise myself with the code again. I assume the core library has been updated quite a lot since I wrote this so you might want to get the latest version and try that.