Fatal编程技术网
  • javascript/
  • Javascript 如何在现有（非d3graph）节点之间添加d3graph链接

Javascript 如何在现有（非d3graph）节点之间添加d3graph链接

javascript html d3.js

Javascript 如何在现有（非d3graph）节点之间添加d3graph链接,javascript,html,d3.js,Javascript,Html,D3.js,我从头开始编写了以下代码。我总是在左上角创建一个静态节点。我称之为模板。每当在模板上单击鼠标时，我希望创建一个新节点。我应该能够将新节点拖到任何我想要的地方。节点应该保留在我离开它的地方。此外，我应该能够绘制从一个节点到另一个节点的线。 正在创建新节点。在鼠标按下一个新节点时，我将该节点存储在一个变量中。在鼠标移动时，我编写了转换函数使其移动，但它不起作用。我还写了转换内点击。但这也不起作用。所以我把它去掉了。 此外，链接未显示。 很抱歉，我不熟悉d3和svg。我看到了一些例子，但仍然没有得到解

我从头开始编写了以下代码。我总是在左上角创建一个静态节点。我称之为模板。每当在模板上单击鼠标时，我希望创建一个新节点。我应该能够将新节点拖到任何我想要的地方。节点应该保留在我离开它的地方。此外，我应该能够绘制从一个节点到另一个节点的线。 正在创建新节点。在鼠标按下一个新节点时，我将该节点存储在一个变量中。在鼠标移动时，我编写了转换函数使其移动，但它不起作用。我还写了转换内点击。但这也不起作用。所以我把它去掉了。 此外，链接未显示。 很抱歉，我不熟悉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>


line.link{
笔画宽度：2px；
行程：#999；
笔划不透明度：0.6；
}
标记#箭头{
行程：#999；
填写：#999；
}
var svgContainer=d3。选择（“svgContainer”）；
var noderray=新数组（）；
var linkArray=新数组（）；
var lastNodeId=-1；
var element0a=svgContainer.append（“g”）.attr（“类”、“节点”）.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_节点；
var mouseup_节点；
var force=d3.layout.force（）.nodes（noderray）.links（linkArray.start（）；
var nodes=svgContainer.selectAll（“g.node”）.data（noderray.call（force.drag）；
var links=svgContainer.append（“g”）.selectAll（“line.link”）.data（force.links（））
.enter（）.append（“行”）.attr（“类”、“链接”）
.attr（“标记结束”、“url（#箭头）”）；
函数mouseDownOnTemplate（）{
var element1a=svgContainer.append（“g”）.attr（“类”、“节点”）.attr（“x”，0）.attr（“y”，0）
.on（“鼠标向下”，功能（d）{
mousedown_node=d.target；
})
.开启（“鼠标”，功能（d）{
mouseup_node=d.target；
push（{源：mousedown_节点，目标：mouseup_节点}）；
});
lastNodeId++；
var element1b=element1a.append（“rect”）.attr（“x”，100*lastNodeId）.attr（“y”，0）.attr（“宽度”），50.attr（“高度”），50.attr（“填充”，“紫色”）；
noderray[lastNodeId]={id:lastNodeId，ui:element1a}；
force=d3.layout.force（）.nodes（noderray）.links（linkArray.start（）；
nodes=svgContainer.selectAll（“g.node”）.data（noderray.call（force.drag）；
links=svgContainer.append（“g”）.selectAll（“line.link”）.data（force.links（））
.enter（）.append（“行”）.attr（“类”、“链接”）
.attr（“标记结束”、“url（#箭头）”）；
}
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）；
});
先前案文如下： 如果将以下代码放在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>


JQuery测试1
//声明变量
//var-newNum=0；
//var x=null；
$（文档）.ready（函数（）{
$（“.node1”）.draggable({
helper:'克隆'，//克隆节点/图标。
游标：“移动”//使用游标移动。
//公差：“配合”/？？
})
$（“.main”）.droppable({
drop：函数（事件、节点）
{
var x=node.helper.clone（）；
x、 拖拉的({
安全壳：'.main'
});
node.helper.remove（）；
x、 附录（'.main'）；
}
});
});
输入





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

类似于？类似于什么？你能给一个链接吗？点击“这个”…是的，类似，但我想应该有一个节点已经显示在工具箱中。当用户在该节点内按下鼠标并在画布内释放时，就会在画布中创建一个节点。工具箱中的原始节点将保持原样。画布中的节点应保持与用户释放鼠标的位置完全相同。好的，因此不要使用强制布局来定位节点。应该很容易适应。