D3 DAG Project

Currently I have a graph being generated server side but I require it to be generated completely client side. I require a Directed acyclic graph to be created from existing JSON data the server already uses. It should be built with D3.js and no other external libraries, just vanilla JavaScript.

The specific requirement are.

- The graph should be generated from the attached JSON data, the JSON contains a section called SVGs which shows how the graphs should look but should not be used for generation - there is a separate section called "flowchart_visulization" that should contain the bulk of the data required but other sections can be used if needed.

- The graph should support cycles, leafs coming in from the side (no parent) and multiple lines leading to one entity.

- The graph should show different shapes as defined in "shape", within "chart_attributes" within "flowchart_visulization"

- There should be a way to add new nodes into the graph at any point.

- There should be a way to move a node to a new position

- Selecting a node should initiate a callback so its details can be changed.

- Saving should be considered, saving will simple send the JSON back to the server - this does not need to be implemented but should be kept in mind.

Attached is the JSON data and an example of how the graph might look (or at least the functionality it should contain) but the SVGs are all included as part of the JSON for reference.

Dthreejs JavaScript

Project ID: #7917468

About the project