jquery 拖放时附加到 d3 js 树的对话框

Question

我有一个在 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>

Answer 1

只注释不需要的行。

如何关闭对话框仍待办。

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

我终于找到了问题的答案。它基本上没有从 jquer 加载样式，给定模式和框的样式也不完全正确。我在这里发布我的答案，所以如果有人遇到同样的问题可以看到它。首先将这些行添加到 html 中的 head 标记中：

<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>

然后您可以将对话框添加到 html 代码的正文中：

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

最后我们应该将 jquery 代码添加到我们的 javascript 代码中：

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

jquery 拖放时附加到 d3 js 树的对话框

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

javascript

tree

jquery

drag

d3.js