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

问题描述

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

标签： javascriptjqueryd3.jstreedrag

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); }

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

问题描述

解决方案

推荐阅读