Question

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

注意：iI将节点的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创建时，我不知道该怎么做。

如何在现有（非d3图形）节点之间添加d3图形链接

0 个答案: