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" + dx + "," + dy + "C" + dx + "," + (dy + d.parent.y) / 2 + " " + d.parent.x + "," + (dy + 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(" + dx + "," + dy + ")"; }) .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) { dx += d3.event.dx dy += d3.event.dy d3.select(this).attr("transform", "translate(" + dx + "," + dy + ")"); } 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>
2 answers
solution1
0 2018-10-25 10:22:05
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);
}
solution2
0 ACCPTED 2018-10-25 18:05:39
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" );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.