Question

使用D3，我尝试将拖动事件绑定到＆＃39;组元素，并将一个单独的拖动事件绑定到该组的子级。这似乎导致了问题，因为只有群组的拖拽事件才会触发。

我已经阅读了一些规格，但没有看到与此有关的任何内容。这是代码：

var group = that.vis.append('g')
            .classed('dragger', true)
            .attr('transform', 'translate(100, 0)')
            .call(drag.on( 'drag', function() {...} )),

    box = group.append('rect')
            .attr('width', that.width * options.width)
            .attr('height', that.height)
            .classed('box', true);

var left = group.append('rect')
                .attr('width', 4).attr('x', 0)
                .attr('height', that.height)
                .classed('drag-extend right', true)
                .call(drag2.on('drag', function(){...}));

＆＃39; that.vis＆＃39;是指包含svg元素的d3选择。 d3拖动行为的创建方式如下：

var drag = d3.behavior.drag()
                    .origin(function() {
                      var string = d3.select(this).attr('transform'),
                            //string = string.replace(/translate\(/, '');
                            array = string.match( /translate\((\d+), (\d+)\)/ );

                      return {
                        x : parseInt(array[1]),
                        y : parseInt(array[2])
                      }
                    }),

    drag2 = d3.behavior.drag()
                  .origin(function() {
                      return {
                         x : d3.select(this).attr('x'),
                         y : 0
                      };
                   });

我需要对要素进行分组才能移动整个群组。我唯一的想法是，当你将一个事件处理程序附加到一个SVG组时，它将该处理程序附加到其中的所有元素？我希望能够在第二个元素的拖动处理程序上停止传播，这样它就不会冒泡到第二个元素的拖动处理器上。然而，第二个事件似乎根本没有附加。

在这里有点茫然，任何帮助都会非常感激......

更新所以我能够让这个工作，但不是我想象的方式，我仍然对这里到底发生了什么感兴趣：

drag2 = d3.behavior.drag()
                  .origin(function() {
                      return {
                         x : d3.select(this).attr('x'),
                         y : 0
                      };
                   }).on( 'drag', shapeBox );

var left = group.append('rect')
                .attr('width', 4).attr('x', 0)
                .attr('height', that.height)
                .classed('drag-extend right', true)

                .call(drag2.on('dragstart', function(){...}));


function shapeBox() { ... }

出于某种原因添加了＆＃39; dragstart＆＃39;处理程序以某种方式将拖动处理程序直接附加到要触发的行为。这很奇怪，因为在查看d3文档和我对DOM的知识（可能有些限制）时，我应该能够通过＆＃39; drag2＆＃39;变量来调用。

不确定额外侦听器的绑定是什么，但不知何故让拖拽工作。

将相同的事件绑定到SVG g元素和它的子元素

0 个答案: