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
  • 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 Jan 31 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ý Feb 4 at 15:41
0

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
    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ý Feb 3 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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