Javascript d3.behavior.zoom（）跳转

我有下面的d3图表。它只是一些节点和它们之间的链接。图表有两个功能：

可以在图形周围单击并拖动各个节点

您可以使用

d3.behavior.zoom

在svg周围单击并拖动，以便进行平移（并使用鼠标滚轮进行缩放）

我看到的问题是，如果我拖动一个节点（例如，将一个节点向右移动20px），然后尝试平移图表，整个图表会立即向右移动20px（根据示例）

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

下面是一个演示：

---

我如何防止在尝试平移时出现最初的跳跃？我读过一些建议创建一个额外的嵌套svg

g

元素并将其移动，但这似乎没有什么区别。

根据D3 v3 API：

<> P>在将交互行为与其他事件侦听器相结合时（如拖动优先于缩放），还可以考虑在源事件上停止传播以防止多个动作

因此，在您的

dragstart

中，只需添加

d3.event.sourceEvent.stopPropagation（）：

这是你的小提琴：

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