Aligning nodes - D3 Force layout

[kayasa]

I am using D3 to show activities in the workflow. Below is a fiddle

http://jsfiddle.net/g3yq9z6g/11/

This fiddle has just a few activities. It look fine and also the user has the ability to select a node and move it, in order to get a better view. However, when I am using this is real workflows (especially the bigger ones), the display doesn't look great.

For instance, below is a display for one of the medium sized workflows -

Given this kind of a display, it would be very difficult for the user to understand the workflow.

One thing that would surely help, is to always have the 'Initiate' activity on the left center of the screen and 'End' activity on the right center of the screen. That way, at least user would not have to locate the Start and End of the workflow. Start and End activities of the workflow will always be called 'Initiate' and 'End'.

Is it possible to achieve this? Something like -

However, this doesn't completely solve the problem as the workflow is still hard to read. 

Something like the below screenshot would probably make more sense for the users, where most nodes are aligned to the center. If there is more than one transition from the node, then that is displayed on either top of bottom. 

The circular kind of display that Force layout is generating by default very hard to read for this type of use case. It is all right if end users have to manually adjust a few nodes at runtime in order to improve the layout, however, if they have to drag and adjust each and every node, then it is very cumbersome. How to calculate the nodes position so as to graph layout is logical (left to right) and there are minimal crossings of edges. Any suggestions on how this could be improved?

Thank you.

[Ravin Kumar]

Is there a reason you need to use force based network diagrams? They don't lend themselves well to process diagram as you've noticed

[Russell Jurney]

Consider doing layout on the server side. Gephi toolkit is what I use, but there are other projects. Gephi has a 'noverlap' and 'label adjust' layouts you can run after your force directed layout. Then just transmit x/y coordinates to the client to simply draw the graph in d3.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Russell Jurney twitter.com/rjurney russell.jurney@gmail.com datasyndrome.com

[Anshul Kayastha]

Thank you for your response. Can you please suggest what type of diagram would lend itself well to a process diagram? Should I be using anything else instead of D3?

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/bqyzLUKJ6HQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[Anshul Kayastha]

Thank you Russell. We have Java on the Server side. Can Gelphi toolkit be integrated with Java?

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/bqyzLUKJ6HQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[Russell Jurney]

Yes, Gephi is written in Java. I've used it from Scala and JRuby, and you can certainly use it from Java.

http://gephi.github.io/toolkit/

[dyzero...@gmail.com]

hi,rjurney

 Do u have any related code? i have checked the gephi toolkit codes, but seems i cannot find the noverlap' and 'label adjust' layouts

在 2015年5月25日星期一 UTC+8下午1:02:27，rjurney写道：

[nick]

Here's an example of having force align different nodes differently:
http://bl.ocks.org/bollwyvl/9239214

Also, something like cola.js /webcol would support real constraints.
https://github.com/tgdwyer/WebCola