当我在节点上拖动鼠标时，我如何防止使用d3.ehavior.zoom(）.on(“缩放”，重绘）

how can i prevent d3.behavior.zoom().on("zoom", redraw) from being used when i mousedrag on my nodes?

本文关键字：ehavior zoom 重绘 缩放 d3 on 拖动 节点 鼠标 何防止      更新时间：2023-09-26

现在，当我在后台拖动鼠标时，它会移动整个图形。当我点击并拖动一个节点时，它也会移动整个图形。当我删除时

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

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

现在，当我试图将.call(d3.behavior.zoom().on('zoom', redraw));应用于矩形时，移动确实很不稳定，所以我将其保留在.graph上，但当我将其放在graph上时，当我选择节点时，它们会移动整个东西。我尝试了很多事情，包括svg.selectAll("g")上的.call(d3.behavior.zoom().on('zoom', null));。我还尝试用.on("mousedrag", function)将enableevent设置为false，但没有成功。我似乎就是找不到办法让它发挥作用。您可以从这里获得mericables.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>

想明白了。当我尝试移动背景时，我没有想到我可以使用鼠标悬停事件来指示我何时在背景上。

首先创建一个背景。

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

相关文章：