Question

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

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

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
  }

}
])

拖动一组元素并放大D3

0 个答案: