Thư viện FamilyTree JS  

sơ đồ gia phả html js framework familly treejs nodeBinding: thuộc tính 'name' dữ liệu sẽ được liên kết với phần tử UI 'field_0' từ mẫu.

• pids: vợ, chồng
• fid: id cha
• mid: id mẹ
• gender: giới tính
• photo: hình ảnh
• name: tên
• born: năm sinh
• email: gmail
• city: thành phố
• country: thôn, xã

giới thiệu sơ đồ hoạt động

family.load(
    [
        { id: 1, pids: [3], gender: 'male', photo: 'https://cdn.balkan.app/shared/m60/2.jpg', name: 'Zeph Daniels', born: '1954-09-29' },
        { id: 2, pids: [3], gender: 'male', photo: 'https://cdn.balkan.app/shared/m60/1.jpg', name: 'Rowan Annable', born: '1952-10-10' },
        { id: 3, pids: [1, 2], gender: 'female', photo: 'https://cdn.balkan.app/shared/w60/1.jpg', name: 'Laura Shepherd', born: '1943-01-13', email: '[email protected]', phone: '+44 845 5752 547', city: 'Moscow', country: 'ru' },
        //Bố mẹ của Samson Stokes
        { id: 4, pids: [5], photo: 'https://cdn.balkan.app/shared/m60/3.jpg', name: 'Rowan Annable' },
        { id: 5, pids: [4], gender: 'female', photo: 'https://cdn.balkan.app/shared/w60/3.jpg', name: 'Lois Sowle' },
        //chồng vợ
        { id: 6, mid: 2, fid: 3, pids: [7], gender: 'female', photo: 'https://cdn.balkan.app/shared/w30/1.jpg', name: 'Tyler Heath', born: '1975-11-12' },
        { id: 7, pids: [6], mid: 5, fid: 4, gender: 'male', photo: 'https://cdn.balkan.app/shared/m30/3.jpg', name: 'Samson Stokes', born: '1986-10-01' },
        //con cái
        { id: 8, mid: 7, fid: 6, gender: 'female', photo: 'https://cdn.balkan.app/shared/w10/3.jpg', name: 'Celeste Castillo', born: '2021-02-01' },
        { id: 9, mid: 7, fid: 6, gender: 'female', photo: 'https://cdn.balkan.app/shared/w10/3.jpg', name: 'Celeste T', born: '2021-02-01' }
    ]
);