17

I am creating Family Tree feature for my web app with HTML5 requirements. I already searched and found some JS samples, but I haven't find any that fit with my requirements. I already tried JIT, Rafael, GoJS, etc.

I found this to be the closest one is from GoJS:

GoJS fam-tree option #1

But this not enough. I need to connect one member with another member with drag and drop function.

Is there some JS that may fit with the requirements or at least operate like GoJS? Since I need to pay a license for GoJS AND THEN customize it, the budget is tight. Thank you very much.

Glenn Ferrie
  • 10,290
  • 3
  • 42
  • 73
Irwan
  • 543
  • 1
  • 5
  • 18
  • I was looking at your GoJS link. Can you supplement that library with jQuery.UI and see if you can make those elements 'draggable' and 'droppable'? I'm going to try to put that together (if they have a free trial) – Glenn Ferrie Apr 13 '13 at 03:05
  • I found jOrgChart can be draggable and droppable. http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html – Irwan Apr 18 '13 at 02:32

2 Answers2

6

I already found it. I use jsPlumb for this Family Tree with some modification. Thanks for you all.

danielpopa
  • 810
  • 14
  • 27
Irwan
  • 543
  • 1
  • 5
  • 18
  • 1
    Have a look at my sample : http://scienic-data.com/force-layout-british-monarch-family-tree/ mouse scroll to zoom, draggable, with tooltip. Able to display difficult relationship such as a person who have more than one marriage and marriage between family members/incest. Created using d3.js force layout. – Rickard Sep 11 '18 at 13:21
  • Nice, How can I reuse your tree? Maybe opensource this? – hamecoded Jul 22 '19 at 21:57
6

The functionality you're looking for is built in to GoJS. For instance have a look at the
Org Chart Editor Sample.

You can double click on nodes in order to add a new person, drag a node onto another in order to change relationships, and draw links (with a click drag operation) from a node's background to other nodes that have no "boss".

(If you want a node to have no Boss in this simple sample, you can select and delete links)

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171