<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<style>
  #controls {
    position: fixed;
    left: 0px;
    width: 20%;
    top: 0px;
    height: 10%;
  }
  
  #chart {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
  }
  
  path.link {
    fill: none;
    stroke: #c5c5c5;
    stroke-width: 1.0px;
  }
  
  circle {
    fill: #ccc;
    stroke: #fff;
    stroke-width: 1.5px;
  }
  
  text {
    fill: #000000;
    font: 11px sans-serif;
    pointer-events: none;
  }
  
  .ingoing {
    stroke: #237690!important;
    stroke-width: 1.5px!important;
  }
  
  .outgoing {
    stroke: #FA1209!important;
    stroke-width: 1.5px!important;
  }
  
  .selected {
    stroke: #000000!important;
    stroke-width: 1.5px!important;
  }
</style>

<body>
  <div id="chart"></div>
  <div id="controls">
    <input type="checkbox" id="cb_hierarchical" checked="True" onclick='redraw();'>Order by dependency chain<br>
    <input type="checkbox" id="cb_curved" checked="True" onclick='redraw();'>Curved Lines<br>
  </div>
  <script>

    var cb_hierarchical = document.getElementById("cb_hierarchical");
    var cb_curved = document.getElementById("cb_curved");
    var chartDiv = document.getElementById("chart");
    var svg = d3.select(chartDiv).append("svg");

    var linkedByIndex = {};
    var num_links = {};
    var num_links_incoming = {};
    graph.links.forEach(function(d) {
      linkedByIndex[d.source + "," + d.target] = 1;
      num_links[d.target] = (num_links[d.target] != undefined ? num_links[d.target] + 1 : 1)
      num_links[d.source] = (num_links[d.source] != undefined ? num_links[d.source] + 1 : 1)
      num_links_incoming[d.target] = (num_links_incoming[d.target] != undefined ? num_links_incoming[d.target] + 1 : 1)
      d.distance = graph.nodes[d.target].level - graph.nodes[d.source].level;
    });

    const maxlevel = graph.nodes.reduce(function(currentValue, node) {
      return Math.max(node.level, currentValue);
    }, 0);
    var maxlinks = Object.values(num_links).reduce(function(currentValue, entry) {
      return Math.max(entry, currentValue);
    }, 0);

    var white_background = svg.append("svg:defs")
      .append("filter")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 1)
      .attr("height", 1)
      .attr("id", "white_background");

    white_background
      .append("feFlood")
      .attr("flood-color", "white");

    white_background
      .append("feComposite")
      .attr("in", "SourceGraphic")

    var simulation = d3.forceSimulation(graph.nodes)
      .on('tick', tick);

    // add the links
    var path = svg.selectAll("path")
      .data(graph.links)
      .enter().append("svg:path")
      .attr("class", "link");

    // define the nodes
    var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("g")
      .attr("class", "node")
      .on("mouseover", highlight(true))
      .on("mouseout", highlight(false))
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

use minimal from code above to draw following structure type: [{locationId:"someLocationId ", id:"someId", title:"название кнопки" content:"текст",choices:[someId, someId]},{locationId:"someLocationId", id:"someId", title:"название кнопки" content: "text",choices:[someId, someId]},...]