Question

就像现在一样，当我在背景上进行mousedrag时，它会移动整个图形。当我单击并拖动节点时，它也会移动整个图形。当我删除

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

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

现在，当我试图将.call(d3.behavior.zoom().on('zoom', redraw));应用于矩形时，运动真的很不稳定，所以我将它保留在.graph上，但是当我在图表上有它时，当我选择节点时，它们会移动整个东西。我在.call(d3.behavior.zoom().on('zoom', null));上尝试了很多内容，包括svg.selectAll("g")我也尝试将某些条件表达式enableevent设置为false，.on("mousedrag", function)无效。我似乎无法找到一种方法来完成这项工作。你可以从here获得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>

Answer 1

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

首先创建一个背景。

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

我怎么能阻止d3.behavior.zoom（）。on（＆＃34; zoom＆＃34;，redraw）在我的节点上进行mousedrag时使用？

1 个答案: