7

I'm working on an algorithm for drawing a mindmap. The main point there is to intelligently arrange the nodes, so that there are no overlaps and it looks nicely distributed. As an example see this screenshot (from MindNode):

what it should look like

Any ideas on how to arrange this structure nicely, given the space that each node occupies? Do you know of any codes that I could look into (something a bit simpler that graphviz)?

Before it comes up, I am not looking for "physical simulation" algorithms such as this, or finished programs like dot. In the end I want to implement it in JS, but for understanding the algorithm any language is fine.

lucas clemente
  • 6,255
  • 8
  • 41
  • 61

1 Answers1

1

I guess you could do this with CSS only. Give the right classes with JS to your nodes, and CSS will take care of arranging them as necessary.

For example, you can set margin: 1em 0 1em 0 on each node so that it has enough space, etc etc.

Florian Margaine
  • 58,730
  • 15
  • 91
  • 116
  • Is CSS smart enough now to draw suitable splines as in the diagram? – Steve Jessop Apr 27 '12 at 22:55
  • 1
    You could play around with `border-radius` for this, yes. But using `canvas` would be better I guess. The caveat is that CSS won't do any magic for you and you will have to calculate every time you add a node. – Florian Margaine Apr 27 '12 at 22:57
  • Hmm. Non-circular border-radiuses are pretty fugly in my browser (Firefox), and even ignoring that, I don't think you can produce the curves above using only ellipses. But maybe the curves aren't what the questioner really cares about: only positioning is mentioned. – Steve Jessop Apr 27 '12 at 23:07
  • Hm, I didn't think of using CSS only. I'll play around with it a bit, but I'm very sceptic that it's feasible. – lucas clemente Apr 27 '12 at 23:28
  • Also, the splines aren't the issue, that's pretty easy using canvas. – lucas clemente Apr 27 '12 at 23:30
  • @SteveJessop actually, after thinking about it, it'd be just better to use images for these lines. Three different images would be enough (playing with repeat and/or rotation). – Florian Margaine Apr 27 '12 at 23:30
  • Alright, I managed to do it with CSS, it was actually way easier than I thought at first, just placing divs around each node and its subnodes. Thanks for the hint! – lucas clemente Apr 28 '12 at 21:02