Javascript 当我在节点上拖动鼠标时，如何防止使用d3.behavior.zoom（）？_Javascript_Svg_D3.js

Javascript 当我在节点上拖动鼠标时，如何防止使用d3.behavior.zoom（）？

javascript svg d3.js

Javascript 当我在节点上拖动鼠标时，如何防止使用d3.behavior.zoom（）？,javascript,svg,d3.js,Javascript,Svg,D3.js,现在，当我在背景上拖动鼠标时，它会移动整个图形。当我单击并拖动一个节点时，它也会移动整个图形。当我移除 d3.select(".graph") .call(d3.behavior.zoom().on('zoom', redraw)); 我可以点击并拖动节点，但是我不能在地图上滚动或放大。我想要的是能够在拖动背景时平移贴图，并在单击和拖动节点时移动节点现在，当我尝试应用.calld3.behavior.zoom.on'zoom'时，重新绘制；对一个矩形来说，运动是非常不稳定的，所以我把它保

现在，当我在背景上拖动鼠标时，它会移动整个图形。当我单击并拖动一个节点时，它也会移动整个图形。当我移除

d3.select(".graph")
  .call(d3.behavior.zoom().on('zoom', redraw));

我可以点击并拖动节点，但是我不能在地图上滚动或放大。我想要的是能够在拖动背景时平移贴图，并在单击和拖动节点时移动节点

现在，当我尝试应用.calld3.behavior.zoom.on'zoom'时，重新绘制；对一个矩形来说，运动是非常不稳定的，所以我把它保持在图上，但当我把它放在图上，当我选择节点时，它们会移动整个东西。我尝试了很多方法，包括.calld3.behavior.zoom.on'zoom'，null；在svg.selectAllg上，我还尝试使用.onmousedrag函数将enableevent设置为false，但没有效果。我就是找不到一个办法让这一切顺利。您可以从中获取miserables.json。任何帮助都将不胜感激。多谢各位

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

.node {
  stroke: #00000;
  stroke-width: 0px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
</head>
<body>
<div class="graph"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 1100,
    height = 900;

var color = d3.scale.category20();

var force = d3.layout.force()
    .gravity(.05)
    .charge(-700)
    .linkDistance(150)
    .size([width, height]);

var svg = d3.select(".graph").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append('g');

d3.select(".graph")
  .call(d3.behavior.zoom().on('zoom', redraw));

function redraw() {
  console.log("here", d3.event.translate, d3.event.scale);
  svg.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } 

d3.json("miserables.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

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

  node.append("circle")
    .attr("r", function(d) { return Math.sqrt(d.group * 20); })
    .style("fill", function(d) { return color(d.group); })
    .attr("pointer-events", "auto")
    .attr("class", "circlenode");

  node.append("text")
    .attr("text-anchor", "right") 
    .attr("fill","black")
    .style("pointer-events", "none")
    .attr("font-size", function(d) { 20 + 'px'; })
    .attr("font-weight", function(d) { return "bold"; })
    .text( function(d) { return d.name + ' (' + d.group + ')';});

  setTimeout(function() {
    node.classed("fixed", function(d) { return d.fixed = true; });
  }, 9000);

  force.on("tick", function() {
    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";});
  });
});
</script>

</body>
</html>

我明白了。当我尝试移动背景时，我没有想到我可以使用mouseover事件来指示我在背景上的时间

svg.append("rect")
    .attr("class", "background")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "pink");

首先创建一个背景

svg.append("rect")
    .attr("class", "background")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "pink");

然后为背景和您希望它工作和不工作的地方创建鼠标悬停事件

d3.select(".background")
.on("mouseover", function() {
  d3.select(".graphmap")
    .call(d3.behavior.zoom().on("zoom", redraw))
    .on("dblclick.zoom", null)
    .on("wheel.zoom", null);
})
.on("mouseout", function() {
  d3.select(".graphmap")
    .call(d3.behavior.zoom().on("zoom", null))
    .on("dblclick.zoom", null)
    .on("wheel.zoom", null);
});
d3.select(".link")
.on("mouseover", function() {
  d3.select(".graphmap")
    .call(d3.behavior.zoom().on("zoom", redraw))
    .on("dblclick.zoom", null)
    .on("wheel.zoom", null);
})
  .on("mouseout", function() {
  d3.select(".graphmap")
    .call(d3.behavior.zoom().on("zoom", null))
    .on("dblclick.zoom", null)
    .on("wheel.zoom", null);
});

现在，我只需要找出如何使它在翻译时不被跳过S

FWIW，我偶然发现了一个特别的功能完整的示例，它可以满足您和我的需要，还有更多内容：。正如其标题所示，它可以拖动/缩放/平移/居中/调整大小/标签/过滤/高亮显示。