Databases
StackOverflow2013
Postsdbo
POD3 graph with svg nodes - How to move nodes to arbitrary positions
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3 graph with svg nodes - How to move nodes to arbitrary positions
    text
    copied!<p>I want to make a D3 graph, which should be as follows:</p> <ol> <li><p>When the html page is loaded, there will be a single node at a fixed location. Let us say top left. Let us call it template node and this node is non-movable.</p></li> <li><p>When the user does mouse down on the template node, a new node is created at the same location as the template node and the user should be able to drag the new node to where he wants. The new node should remain exactly where the user moves it to.</p></li> <li><p>At any time user should be able to move a node. Again the node should remain where the user leaves it.</p></li> <li><p>User should be able to draw link between any two nodes. Let us assume that if he drags from one node to another without holding down ctrl key, then a link is drawn and if he drags while holding down the control key, then the node moves. </p></li> <li><p>When a link is drawn between two nodes, then the nodes should not change positions.</p></li> <li><p>When two nodes are linked and one of them is moved by dragging it, then the link should change in size and orientation as needed.</p></li> </ol> <hr> <p>I am using force layout.</p> <p>I am able to create a template node but it always goes to the center of the container - I think it is because the center of the container is the center of gravity. But not sure how to fix its position to the top left through code.</p> <p>I can create links and new nodes. But the nodes move and links resize. May be it is because force layout tries to make link lengths equal to the link distance in the force layout. But I do not know how to use a function for link distance? I am even not sure if that will really help.</p> <p>So what method should I use? Any idea?</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