D3js force button to enable / disable drag actions

My goal is to enable or disable the drag action on the nodes of my graph. I have this entry: <input id="drag" name="drag" type="button" value="switch drag" />

. I found some tips here and this question .

As I said in the comment below, it doesn't work if I create nodes and links from an external json file. Is my function d3.json ("graph.json", function (error, graph) {...}); Wrong?

Here is my json file:

{
  "nodes": [
    {"x": 260, "y": 210, "fixed": true},
    {"x": 300, "y": 210, "fixed": true},
    {"x": 260, "y": 260, "fixed": true},
    {"x": 300, "y": 260, "fixed": true}
  ],
  "links": [
    {"source":  0, "target":  1},
    {"source":  0, "target":  2},
    {"source":  2, "target":  3},
    {"source":  3, "target":  1}
   ]
}

      

        
        
        
      

    

And here is my code:

   var width = 960, height = 500;

   var svg = d3.select("body")
               .append("svg")
               .attr("width", width)
               .attr("height", height);


   var myLinks = svg.selectAll(".link");
   var myNodes = svg.selectAll(".node");

   var force = d3.layout.force()
       .size([width, height])
       .charge(-400)
       .linkDistance(40)
       .on("tick", tick);

   // Allows the drag actions 
   var drag = force.drag();

   // Read the json file and creates the links and the nodes
   d3.json("graph.json", function(error, graph) {
      if (error) alert(error);    

      force
         .nodes(graph.nodes)
         .links(graph.links)
         .start();

      myLinks = myLinks.data(graph.links)
         .enter()
         .append("line")
         .attr("class", "link");

      myNodes = myNodes.data(graph.nodes)
         .enter()
         .append("circle")
         .attr("class", "node")
         .attr("r", 6)
         .call(drag);
   });

   // Add properties to myLinks and myNodes
   function tick() {
      myLinks.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; });

      myNodes.attr("cx", function(d) { return d.x; })
         .attr("cy", function(d) { return d.y; });
   }

   var dragOnOff = d3.select("#drag");

   dragOnOff.on("click", function() { 
      myNodes.on('mousedown.drag', null);
   });

   var dragOnOff = d3.select("#drag");

   var dragCallback = myNodes.property('__onmousedown.drag')['_'];

   var draggable = true;

   dragOnOff.on("click", function () {
       myNodes.on('mousedown.drag', draggable ? null : dragCallback);
       this.value = 'switch drag to ' + draggable;
       draggable = !draggable;
   }); 

      

        
        
        
      

    

I wish someone could answer me and my post can help someone else! Thanks in advance!