jquery dialog box appended to d3 js tree on drag and drop

Question

I have a tree that is created in d3 and each node can be dragged and dropped in any point.

I want my code to pop up a dialog box with several choices when I drop a node on specific location. I do not have any idea how it can be implemented in d3. I searched and found out that this can be done with jquery but I do not know how I can apply jquery into a d3 environment.

An example similar to my problem is explained in here . I implemented something similar to this but my code does not show any jquery code in my webpage. So my first question is that how can I use d3 and jquery at the same time? A simple example can help me. (like clicking on a node of a tree in d3 svg and a popup of a dialog box in jquery) And my second question is related to my code snippet. I have provided my code below, if anyone can help me with the implementation of a popup dialog box in the commented area I would really appreciate that.

var treeData =
  {
    "name": "A",
    "children": [
      { 
  "name": "B",
        "children": [
          { "name": "C" },
          { "name": "D" }
        ]
      },
      { 
        "name": "E" 
      }
    ]
  };
  var margin = {top: 40, right: 90, bottom: 50, left: 90},
    width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var treemap = d3.tree()
    .size([width, height]);

//  assigns the data to a hierarchy using parent-child relationships
var nodes = d3.hierarchy(treeData);

// maps the node data to the tree layout
nodes = treemap(nodes);

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom),
    g = svg.append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

// adds the links between the nodes
var link = g.selectAll(".link")
    .data( nodes.descendants().slice(1))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", function(d) {
       return "M" + d.x + "," + d.y
         + "C" + d.x + "," + (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," + d.parent.y;
       });

// adds each node as a group
var node = g.selectAll(".node")
    .data(nodes.descendants())
  .enter().append("g")
    .attr("class", function(d) { 
      return "node" + 
        (d.children ? " node--internal" : " node--leaf"); })
    .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; })

    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
// adds the circle to the node
node.append("circle")
  .attr('r', 10).attr("id", "nodeid");
  node.append("text")
  .attr("dy", ".60em")
  .attr("y", function(d) { return d.children ? -20 : 20; })
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.name; });
  function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
   dragStarted = null;
}
function dragged(d) {


  d.x += d3.event.dx
  d.y += d3.event.dy
  d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
}
function dragended(d) {
  draggedNode=d;
  if (draggedNode.parent==d.parent){
    //A popup dialog box should come here
    console.log("a dialogbox in here")
    //my implemented yet not working jquery dialog box
    $( document ).ready(function() {
      $("#nodeid").click(function (e) {
        $("#modal01").show();
        $("#box").show();
      })
    })

  }
   
     
  d3.select(this).classed("active", false);
}

.node circle {
  fill: black;
  stroke: steelblue;
  stroke-width: 1px;
}

.node text { font: 12px sans-serif; }

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
}

.modal {
  position: absolute;
  display: none;
  z-index: 10;
}
.modal-box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none
}

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<body>

<!-- load the d3.js library -->  
<script src="mytree.js"></script>
<div id="modal01" class="modal">Blabla</div>
<div id="box" class="modal-box"></div>

</body>

Answer 1

Just comment the lines that are not needed.

How to close the dialog is still todo.

function dragended(d) {
  draggedNode=d;
  if (draggedNode.parent==d.parent){
    //A popup dialog box should come here
    console.log("a dialogbox in here")
    //my implemented yet not working jquery dialog box
    // $( document ).ready(function() {
      // $("#nodeid").click(function (e) {
        $("#modal01").show();
        $("#box").show();
      // })
    // })
  }
  d3.select(this).classed("active", false);
}

Answer 2

I finally found the answer to my question. It basically did not load styles from jquer and the styles of the given modal and box is not completely correct. I am posting my answer in here so if anybody face with the same problem can see it. Just add these lines to your head tag in html first:

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Then you can Add your dialog box to the body of your html code:

  <div id = "dialog-1" 
     title = "Dialog Title goes here...">This my first jQuery UI Dialog!
     <button id = "opener">Open Dialog</button>
   </div>

And last we should add the jquery codes to our javascript code:

$( "#dialog-1" ).dialog( "open" );