FreeMind Mind Map

[Jeremy Darling]

I'm looking at ways to directly view FreeMind mind maps using D3 in web pages.  I know you can export FreeMind mind maps to HTML but this is about a learning experience and updating my skills to the latest version of D3 (bit rusty).

Since FreeMind uses a basic XML structure its really easy to bring in the data and convert it over to JSON for viewing.

Rendering a mind map on the other hand is killing me.  I did a bracket layout (http://bl.ocks.org/jdarling/2503502) a while back, but as I said in the comments, it probably isn't the best approach I could take (two tree's and then doing some general offset to get them to line up left/right sides).  So I'm hoping that someone can give me some pointers on how exactly I would do a nice left/right tree layout based on something like this:

Node={

  id: '',

  text: 'Text to display'

  position: 'right'||'left'

  children: [Node]

}

This is basically a very stripped down version of the FreeMind file format (http://freemind.sourceforge.net/wiki/index.php/File_format)

 - Jeremy

[Patrick Mulder]

On Wednesday, May 21, 2014 10:13:57 PM UTC+2, Jeremy Darling wrote:

Rendering a mind map on the other hand is killing me.  I did a bracket layout (http://bl.ocks.org/jdarling/2503502) a while back, but as I said in the comments, it probably isn't the best approach I could take (two tree's and then doing some general offset to get them to line up left/right sides).

 

Would this example help: http://tommykrueger.com/projects/d3tests/ ?

 

Can you be more specific about what you find difficult, what you tried such that others (incl. me) could learn about how to do this.

 

Thanks!

 

 

[Jeremy Darling]

I managed to get two sided rendering working:

http://bl.ocks.org/jdarling/2d4e84460d5f5df9c0ff

Now what I don't have working is selecting a node and editing the text on it.  Would like to be able to click to select, then use arrow keys to move around between the nodes much like FreeMind lets you do.  Mousetrap (https://github.com/ccampbell/mousetrap) makes capturing the key's easy, but how to select the sibling without first going to the parent, scanning its children for the "self" then looking for next/previous seems a bit expensive.

Really need pointers on changing the text.  Tried updating the data's .text property and calling update() but that doesn't do anything.

If nothing else I'll keep hacking at it tonight :)

 - Jeremy

[Jeremy Darling]

Little more of an update.  Got it to highlight, move around, update the text (I feel stupid, forgot to add text rendering to the updateNode), display the tree, insert items, delete items.  Can move static things around.  In general it now all works the way I would like except it reads like a bad set of hacks.

Will do some cleanup work on the code to make things look better.  But if anyone else is wanting to do a left/right tree with keyboard movement, adding, removing, etc (basically a functional mindmap) take a look at http://bl.ocks.org/jdarling/2d4e84460d5f5df9c0ff

 - Jeremy

--
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/UlyIoRbwe6Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.