У меня есть дерево, созданное в d3, и каждый узел можно перетаскивать в любую точку.
Я хочу, чтобы мой код всплывал в диалоговом окне с несколькими вариантами выбора, когда я перетаскиваю узел в определенном месте.Я понятия не имею, как это можно реализовать в d3.Я искал и обнаружил, что это можно сделать с помощью jquery, но я не знаю, как применить jquery в среде d3.
Пример, аналогичный моей проблеме, объясняется в здесь .Я реализовал нечто похожее на это, но мой код не показывает код jquery на моей веб-странице.Итак, мой первый вопрос: как я могу использовать d3 и jquery одновременно?Простой пример может помочь мне.(например, щелкнув узел дерева в d3 svg и всплывающее диалоговое окно в jquery) И мой второй вопрос связан с моим фрагментом кода.Я предоставил свой код ниже, если кто-то может помочь мне с реализацией всплывающего диалогового окна в области комментариев, я был бы очень признателен.
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>