CODEWITHSUNDEEP
javascriptd3.js
Nagesh
Nagesh

Reputation: 312

Disable node drag in force layout

Implemented force layout, here is the fiddle. However I want to disable the drag behaviour for the nodes, drag event will move the nodes across and set the nodes center to cursor position until mouseup event. Is there a way we can disable this? I tried removing the callback from the nodes as follows:

node.append("svg:circle").attr("r",5).style("fill", "#FE9A2E").on("mousedown.drag", null)

This didn't work. not sure if it will remove the callback from the node. also tried fixing the node position on drag event by setting fixed property of the node to true. But that fixes the node after it has been dragged. how can I stop the nodes from dragging?

Upvotes: 2

Views: 3059

Answers (1)

AmeliaBR
AmeliaBR

Reputation: 27544

The default drag behaviour is added to the nodes in the last part of this statement:

var node = vis.selectAll("g.node").data(nodeSet).enter()
    .append("svg:g").attr("class", "node").call(force.drag);

Just remove the .call(force.drag) and you can no longer move around individual nodes. If you also want to get rid of the behaviour where you can move around the entire graph, it is part of the "zoom" behaviour added in the last line of this statement:

var vis = d3.select(".journalGraph").append("svg:svg")
    .attr("width", w).attr("height", h)
    .attr("pointer-events", "all").append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw)).append('svg:g');

Removing the call statement would get rid of both the pan and zoom functionality. See https://github.com/mbostock/d3/wiki/Zoom-Behavior for more on zooming.

Upvotes: 2

Related Questions