Javascript d3js强制按钮，用于允许/禁用拖动操作

我的目标是允许或禁用图形节点上的拖动操作。我有以下输入：

。我发现了一些提示和其他一些

正如我在下面的评论中所说，如果我从外部json文件创建节点和链接，那么它就不起作用。是我的函数d3.json（“graph.json”，function（error，graph）{…}）；不对

这是我的json文件：

{
  "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}
   ]
}

这是我的代码：

   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;
   }); 

我希望有人能回答我，我的帖子能帮助别人！ 提前谢谢

使用“单击”按钮上的

而不是“输入”按钮上的

非常感谢您的快速回答！我从链接测试了你的代码，效果很好！不幸的是，如果我从外部json文件创建节点和链接，它就不起作用。是我的函数
d3.json（“graph.json”，function（error，graph）{…}）不正确？还是无效？因为有时候导航器会失败。
var dragOnOff = d3.select('#drag');
var draggable = true;

dragOnOff.on('click', function () {
    myNodes.on('mousedown.drag', draggable ? null : dragCallback);
    draggable = !draggable;
});