Question

我有一棵在d3中创建的树，每个节点都可以在任意位置拖放。

当我将节点放在特定位置时，我希望我的代码弹出一个带有多个选项的对话框。我不知道如何在d3中实现它。我搜索并发现可以用jquery完成此操作，但我不知道如何将jquery应用于d3环境。

here中解释了一个与我的问题类似的示例。我实现了与此类似的操作，但是我的代码未在网页中显示任何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加载样式，并且给定的modal和box的样式也不完全正确。我将答案发布在这里，以便任何人遇到相同问题时都能看到。只需将这些行首先添加到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" );

拖放到d3 js树上的jquery对话框

2 个答案: