react-vis-force
react-vis-force copied to clipboard
uber
Question: Is it possible to "move" a node via a mouse drag?
yeah, you could definitely add that level of interaction. The project we were working with did not require it, so I didn't pursue it in initially building, but I think it would mainly require a change to the simulation logic in the force-utils.
Paul,
Thanks for the information. I will see how far I get .
Terry
On Thu, Jan 19, 2017 at 12:01 PM, Paul Marbach [email protected] wrote:
yeah, you could definitely add that level of interaction. The project we were working with did not require it, so I didn't pursue it in initially building, but I think it would mainly require a change to the simulation logic in the force-utils.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/uber/react-vis-force/issues/24#issuecomment-273850584, or mute the thread https://github.com/notifications/unsubscribe-auth/ABiY_YJ0dfx3mUeXpdpg2yXNy48Lcpwvks5rT6UWgaJpZM4LoRXU .
The node dragging was one of my favorite parts of the original d3 force graphs. See example here:
http://bl.ocks.org/norrs/2883411
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
</head>
<body>
<h3><a href="https://stackoverflow.com/questions/10899725/d3-js-force-directed-graph-with-support-for-drag-and-drop-to-make-selected-node">http://stackoverflow.com/questions/10899725/d3-js-force-directed-graph-with-support-for-drag-and-drop-to-make-selected-node</a></h3>
<script type="text/javascript">
var w = 960,
h = 500
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.json("graph.json", function(json) {
var force = self.force = d3.layout.force()
.nodes(json.nodes)
.links(json.links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h])
.start();
var link = vis.selectAll("line.link")
.data(json.links)
.enter().append("svg:line")
.attr("class", "link")
.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; });
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
function dragstart(d, i) {
force.stop() // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}
function dragend(d, i) {
d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
tick();
force.resume();
}
var node = vis.selectAll("g.node")
.data(json.nodes)
.enter().append("svg:g")
.attr("class", "node")
.call(node_drag);
node.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
force.on("tick", tick);
function tick() {
link.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; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
};
});
</script>
</body>
</html>
Would love to see this implemented!
