betty icon indicating copy to clipboard operation
betty copied to clipboard

Published 20 hours ago • verified publisher icon bartfeenstra

Refactor the interactive trees to be SVG-based

Open bartfeenstra opened this issue 4 years ago • 4 comments

Refactor the interactive trees to be SVG-based, for improved interactivity as well as easier styling.

bartfeenstra avatar May 02 '20 18:05 bartfeenstra

d3.js + https://www.npmjs.com/package/d3-dtree could be a possible replacement for Cytoscape.

bartfeenstra avatar May 05 '20 13:05 bartfeenstra

Is there an example of such interactive trees? I have only found one reference example page (your own): https://ancestry.bartfeenstra.com/en/person/. This does not seem to have any such interactivity?

fatso83 avatar Apr 11 '22 04:04 fatso83

https://ancestry.bartfeenstra.com/en/person/I0004/ shows one such example. When building your own Betty site, the betty.plugin.trees.Trees plugin (0.2.x) or the betty.trees.Trees extension (0.3.x) must be enabled, and the person whose page you're looking at must have parents or children for anything to be shown.

bartfeenstra avatar Apr 21 '22 11:04 bartfeenstra

Wow, that is fantastic! I really love this (and the entire Betty thing, which makes sharing Gramps data so much nicer). And the zooming in/out works very smooth, so hoping the SVG code ends up as performant 😄

fatso83 avatar Apr 21 '22 12:04 fatso83