javascript - d3.behavior.zoom() 跳来跳去

Question

我有以下 d3 图表。它只是一些节点和它们之间的链接。图表做了两件事:

1. 您可以在图表周围单击并拖动各个节点。
2. 您可以使用 d3.behavior.zoom 单击并拖动 svg 以平移(并使用鼠标滚轮缩放)。

我看到的问题是，如果我四处拖动一个节点(例如，将节点向右移动 20 像素)，然后尝试平移图表，整个图表会立即向右跳转 20 像素(根据例子)。 d3.behavior.zoom 似乎最初使用 d3.event 来拖动节点或类似的东西。没有把握。这是代码:

var data = {
  nodes: [{
    name: "A",
    x: 200,
    y: 150,
    size: 30
  }, {
    name: "B",
    x: 140,
    y: 300,
    size: 15
  }, {
    name: "C",
    x: 300,
    y: 300,
    size: 15
  }, {
    name: "D",
    x: 300,
    y: 180,
    size: 45
  }],
  links: [{
    source: 0,
    target: 1
  }, {
    source: 1,
    target: 2
  }, {
    source: 2,
    target: 3
  }, ]
};

var dragging = false;

var svg = d3.select("body")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .call(d3.behavior.zoom().on("zoom", function() {
    if (dragging === false) {
      svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")")
    }
  })).append("g");

var links = svg.selectAll("link")
  .data(data.links)
  .enter()
  .append("line")
  .attr("class", "link")
  .attr("x1", function(l) {
    var sourceNode = data.nodes.filter(function(d, i) {
      return i == l.source
    })[0];
    d3.select(this).attr("y1", sourceNode.y);
    return sourceNode.x
  })
  .attr("x2", function(l) {
    var targetNode = data.nodes.filter(function(d, i) {
      return i == l.target
    })[0];
    d3.select(this).attr("y2", targetNode.y);
    return targetNode.x
  })
  .attr("fill", "none")
  .attr("stroke", "white");

var nodes = svg.selectAll("node")
  .data(data.nodes)
  .enter()
  .append("circle")
  .each(function(d, i) {
    d.object = d3.select(this);
    console.log(d);
  })
  .attr("class", "node")
  .attr("cx", function(d) {
    return d.x
  })
  .attr("cy", function(d) {
    return d.y
  })
  .attr("r", function(d) {
    return d.size;
  })
  .on('click', function(d) {

  })
  .call(d3.behavior.drag()
    .on('dragstart', function() {
      dragging = true;
    })
    .on('dragend', function() {
      dragging = false;
    })
    .on("drag", function(d, i) {
      d.x += d3.event.dx
      d.y += d3.event.dy
      d3.select(this).attr("cx", d.x).attr("cy", d.y);
      links.each(function(l, li) {
        if (l.source == i) {
          d3.select(this).attr("x1", d.x).attr("y1", d.y);
        } else if (l.target == i) {
          d3.select(this).attr("x2", d.x).attr("y2", d.y);
        }
      });
    })
  );

这是一个演示:

https://jsfiddle.net/25q1Lu3x/2/

如何防止在尝试平移时最初跳转？我读过一些建议制作一个额外的嵌套 svg g 元素并移动它，但这似乎没有什么不同。

Answer 1

根据 D3 v3 API:

When combining drag behaviors with other event listeners for interaction events (such as having drag take precedence over zoom), you may also consider stopping propagation on the source event to prevent multiple actions

因此，在您的 dragstart 中，只需添加 d3.event.sourceEvent.stopPropagation();:

.on('dragstart', function() {
    d3.event.sourceEvent.stopPropagation();
    dragging = true;
});

这是您的 fiddle :https://jsfiddle.net/hj7krohd/