D3.js 拖动一组元素并放大D3

我能够很好地结合这个例子。问题是，除了缩放之外，我还希望能够拖动不同的元素组。我现在正在做的是禁用缩放/拖动行为的“平移”部分，并在我希望用户能够拖动的组上有一个单独的拖动事件侦听器。现在的问题是，当我拖动一个组，然后进行放大时，该组会跳转。我想知道解决这个问题的最好方法是什么？我在考虑直接改变所有元素的位置，而不是仅仅翻译整个组，但这对我来说是非常脆弱和低效的

编辑：这是我的代码。我已经对相关部分进行了注释，但将整个指令留给了上下文

window.angular.module('ngff.directives.board', [])
      .directive('board', ['socket',
function(socket) {


  var linker = function(scope, elem, attrs) {
    var nodeDragging = false;


    scope.svg = d3.select(elem[0]).append("svg")
      .attr('width', elem.parent().width())
      .attr('height', elem.parent().height())
      .attr('class', 'boardBackground')
      .on('mouseup', function(){
        nodeDragging = false;
      })
      .append('g')
      .call(d3.behavior.zoom().on('zoom', zoom))
      .append('g')

    scope.svg.append("rect")
      .attr("class", "overlay")
      .attr("width", elem.parent().width())
      .attr("height", elem.parent().height());

    scope.$on('addFormation', function(event, formation) {
      var group = formation.select('g');
      scope.svg.node().appendChild(group.node())
      var pieces = group.selectAll('circle')
        .on('mousedown', function(){
          //Here I set a flag so I can check for node dragging when my zoom function is called
          nodeDragging = true;
        })
        .call(d3.behavior.drag().on('drag', move));
    })

    function move() {
      var dragTarget = d3.select(this);
      dragTarget
        .attr('cx', function() {
          return d3.event.dx + parseInt(dragTarget.attr('cx'))
        })
        .attr('cy', function() {
          return d3.event.dy + parseInt(dragTarget.attr('cy'))
        })
    }

    //******I return here if the user is dragging the node to keep all of the elements from being  translated
    function zoom() {
      if(nodeDragging)return
      console.log('zoom')
      scope.svg
      .attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
    }
  }

  return {
    restrict: 'E',
    link: linker
  }

}
])

---

您能给我们看一下您的代码吗？您是否尝试过对每个组使用单独的缩放行为，以允许单独拖动它们，但可以全局设置缩放？也就是说，在处理程序中，您可以为组设置

translate

，但为整个SVG设置

scale

（并为其他缩放行为进行更新）。您能澄清一下它们是什么意思吗？我赞同拉尔斯的话。看起来您并不是在翻译缩放事件，这可能会导致某些东西在放大时“跳转”。