4

I'm looking to visualize a tree graph for my website/tool.

Technical requirements:

  • support for modern browsers
  • JavaScript (bonus points for TypeScript support or at least typings available)
  • ideally free / one-time license payment

Use-case:

I'm working on a tool for a game, in which you produce resources from other resources using machines. Each machine can have a different speed and only produce some products, each product can be produced by one or more recipes, that can differ in speed, requirements for the recipe, etc. I'm doing a visualization of the whole production chain with calculating how many buildings/power does player need, etc.

I want the player to be able to dynamically add products, build the whole chain himself (while choosing recipes, buildings, etc.) and then save it in a browser/locally to have it available for later.

Required features:

  • possibility to drag and drop nodes
  • grid-like snapping (or at least initial generation of nodes in a grid)
  • HTML content in nodes (I need a selectbox, some checkboxes, buttons, and some text/images, also the content will change over time) - this is the biggest limitation from what I've seen and googled
  • ability to easily add/remove or show/hide nodes in the graph
  • tooltips on edges (ideally image+text, but only text is sufficient as well)
  • nice event system for handling clicking on nodes and html content inside

Bonus features:

  • export/import of the whole thing (ideally json), so that I can reconstruct the graph later
  • save the whole thing as image/pdf
  • node can have border or without border and background (e.g. I want a node that's just html button)
  • works well with Angular/AngularJS
Improve this question
2
  • can you tell us the name of the game? and if its 3D I can't comment yet so I have to use this.
    – user29530
    Commented Jan 31, 2020 at 16:52
  • @user29530 not sure how much is it related, but the game is Satisfactory (and even though the game is 3D, the visualization would be 2D)
    – Tomáš Blatný
    Commented Feb 4, 2020 at 15:41

1 Answer 1

Reset to default
1

I'm not sure you'll find out-of-the-box components to do exactly what you want, but if you're looking for a code direction I would explore D3 with the use of "foreignObject" to embed HTML content in nodes. D3 takes some time to master, but it will give you a lot of flexibility if you're going to be neck deep in coding interactive visualizations.

Here is an example of d3.hierarchy: https://observablehq.com/@d3/collapsible-tree

Improve this answer
1
  • 1
    yeah, I know there probably won't be exact solution, but considering how many js visualizatin libraries are there, I was wondering if there was a person that used a lib that could do similar stuff. Thanks for your suggestion, I'll have a look at that.
    – Tomáš Blatný
    Commented Feb 3, 2020 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.