0

我从头开始编写并编写了以下代码。我总是在左上角创建一个静态节点。我称它为模板。每当在模板上单击鼠标时，我都希望创建一个新节点。我应该能够将新节点拖到我想要的任何地方。该节点应该保留在我离开它的地方。另外，我应该能够从一个节点到另一个节点画线。正在创建新节点。在鼠标按下一个新节点时，我将该节点存储在一个 var 中。在鼠标移动时，我编写了变换函数以使其移动，但它不起作用。我还在click里面写了transform。但这也行不通。所以我删除了那个。也没有显示链接。对不起，我是 d3 和 svg 的新手。我看到了例子，但仍然没有得到解决方案。

注意：我将节点的 x 坐标设置为 id*100 只是为了避免节点位置变得相同。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      line.link {
  stroke-width: 2px;
      stroke: #999;
  stroke-opacity: 0.6;
}

marker#arrow {
  stroke: #999;
  fill: #999;
}
    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>

  <body>
    <svg id="svgContainer">
      <defs>
            <marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0"
                    markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,-5L10,0L0,5Z">
            </marker>
       </defs>
    </svg>

    <script>
      var svgContainer = d3.select("#svgContainer");
      var nodeArray = new Array();
  var linkArray = new Array();
      var lastNodeId = -1;

      var element0a = svgContainer.append("g").attr("class","node").attr("x",0).attr("y",0)
    .on("mousedown", mouseDownOnTemplate);

      var element0b = element0a.append("rect").attr("x",0).attr("y",0).attr("width",50).attr("height",50).attr("fill","#8080B2");

  lastNodeId++;
      nodeArray[lastNodeId] = { id : lastNodeId, ui : element0a };

      var mousedown_node;
      var mouseup_node;

      var force = d3.layout.force().nodes(nodeArray).links(linkArray).start();
  var nodes = svgContainer.selectAll("g.node").data(nodeArray).call(force.drag);
      var links = svgContainer.append("g").selectAll("line.link").data(force.links())
                  .enter().append("line").attr("class", "link")
                  .attr("marker-end", "url(#arrow)");

      function mouseDownOnTemplate() {
    var element1a = svgContainer.append("g").attr("class","node").attr("x",0).attr("y",0)
        .on("mousedown", function(d) {
            mousedown_node = d.target;
        })
        .on("mouseup", function(d){
            mouseup_node = d.target;
            linkArray.push({source:mousedown_node, target:mouseup_node});
        });
    lastNodeId++;
    var element1b = element1a.append("rect").attr("x",100*lastNodeId).attr("y",0).attr("width",50).attr("height",50).attr("fill","purple");
    nodeArray[lastNodeId] = { id : lastNodeId, ui : element1a };
            force = d3.layout.force().nodes(nodeArray).links(linkArray).start();
    nodes = svgContainer.selectAll("g.node").data(nodeArray).call(force.drag);
            links = svgContainer.append("g").selectAll("line.link").data(force.links())
                    .enter().append("line").attr("class", "link")
                    .attr("marker-end", "url(#arrow)");
  }

      force.on("tick", function() {
        links.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

        nodes.attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });
     });

</script>
  </body>

较早的文本如下：如果将以下代码放入 html 文件并在浏览器中运行该文件，您将在左侧看到一个工具箱，在右侧看到一个画布。工具箱中有一个红色方形节点。我们可以将节点拖到画布上。这将在画布上创建节点的克隆。我们可以在画布上创建任意数量的节点并可以移动它们。该代码不使用 d3graph。

<!DOCTYPE HTML>
<html>
<head>
<title> JQuery-Test 1 </title>
<link rel="stylesheet" href="css/style1.css" type="text/css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
//  declaring the variables
//  var newNum = 0; 
//  var x = null;

$(document).ready(function(){
$(".node1").draggable({
helper: 'clone',    // cloning the node/icon.
cursor: 'move'      // move with cursor.
// tolerance: 'fit' //??
})

$(".main").droppable({
drop: function(event, node) 
{
var x = node.helper.clone();
x.draggable({
    containment: '.main'
});
node.helper.remove();           
x.appendTo('.main');    
}
});

});
</script>

</head>
<body>

 <div>
 <h1 id="head1_fixed">Input</h1>
 </div>
 <hr>
<p></p>

<div id="toolbox"> <div class="node1"> </div> <p class="box_title"> -- ToolBox -- </p>         
</div>
<div class="main"> </div> 
</body>
</html>

我希望能够从画布中的一个节点绘制链接到另一个节点。链接最好有箭头，但简单的直线也可以。同样，当我们移动节点时，线条应该相应地放大、缩小或旋转。我想过使用 d3，但是当节点已经存在并且不是使用 d3 创建时不知道该怎么做。

4

0 回答 0