Databases
StackOverflow2013
Postsdbo
POHow to add d3graph links between existing (non d3graph) nodes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add d3graph links between existing (non d3graph) nodes
    text
    copied!<p>I did from scratch and wrote the following code. I create one static node always on top left. I am calling it as template. Whenever mouse down is done on the template is clicked, I want a new node to be created. I should be able to drag the new node to whereever I want. The node should remain where I leave it. Also, I should be able to draw line from one node to another. Creating of new node is working. On mouse down of a new node, I stored the node in a var. And on mouse move, I wrote transform function to make it move but it did not work. I also wrote transform inside click. But that also is not working. So I removed that. Also the link is not getting displayed. I am sorry but I am new to d3 and svg. I saw examples, but still did not get the solution.</p> <p>Note: iI have made x coordinate of a node as id*100 just to avoid node positions becoming same.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; line.link { stroke-width: 2px; stroke: #999; stroke-opacity: 0.6; } marker#arrow { stroke: #999; fill: #999; } &lt;/style&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;svg id="svgContainer"&gt; &lt;defs&gt; &lt;marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0" markerWidth="6" markerHeight="6" orient="auto"&gt; &lt;path d="M0,-5L10,0L0,5Z"&gt; &lt;/marker&gt; &lt;/defs&gt; &lt;/svg&gt; &lt;script&gt; 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; }); }); &lt;/script&gt; &lt;/body&gt; </code></pre> <h2> </h2> <p>Earlier text follows: If you put the following code in an html file and run the file in browser, you will see a toolbox on left and a canvas on right. There is a red square shaped node in the toolbox. We can drag the node to the canvas. This creates a clone of the node on the canvas. We can create any number of nodes on the canvas and can move them around. The code does not use d3graph.</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; JQuery-Test 1 &lt;/title&gt; &lt;link rel="stylesheet" href="css/style1.css" type="text/css"&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;script&gt; // 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'); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;h1 id="head1_fixed"&gt;Input&lt;/h1&gt; &lt;/div&gt; &lt;hr&gt; &lt;p&gt;&lt;/p&gt; &lt;div id="toolbox"&gt; &lt;div class="node1"&gt; &lt;/div&gt; &lt;p class="box_title"&gt; -- ToolBox -- &lt;/p&gt; &lt;/div&gt; &lt;div class="main"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I want to be able to draw links from one node in canvas to another. It is best if links have arrow head but simple straight lines will also do. Also when we move a node, then the line should accordingly enlarge, shrink, or rotate as appropriate. I thought of using d3 but do not know how to do it when en the node is already existing and it is not created using d3.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload