Как вручную вызвать событие аэродинамического сопротивления d3

Question

Все:

Предположим, что существуют два слоя (верхний является SVG: PATH, нижний слой представляет собой SVG: RECT, верхний слой покрывает нижний слой), Я хочу применить перетаскивание D3 к слою RECT и mouseover к слою PATH, может ли кто-нибудь показать мне, как это сделать?

КОД НИЖЕ МОЖЕТ РАБОТАТЬ ТОЛЬКО С путем СЛОЕМ:

 var svg = d3.select("svg"); 
     svg.style("width", "400px") 
      .style("height", "400px") 
      .style("border", "1px solid grey"); 

     var r = svg.select("rect") 
      .attr("width", "300px") 
      .attr("height", "300px") 
      .attr("x", "50px") 
      .attr("y", "50px") 
      .style("fill", "whitesmoke"); 


     var p = svg.select("path") 
      .attr("d", function(){ 
       return "M0 0 L380 0 L300 300L0 380Z"; 
      }) 
      .style("fill", function(){ 
       return "rgba(10,10,10,0.2)"; 
      }) 
      .on("mousedown", function(){ 

      }); 
var drag = d3.behavior.drag(); 

var dragstart = function(){ 
    alert("drag start"); 
}; 

drag.on("dragstart",); 

r.call(drag); 

Благодарность

Answer 1

Я изменил свое сопротивление. Также изменили его функции:

function drag(){ 
    console.log('dragging'); 
    return d3.behavior.drag() 
      .origin(function() { 
       var g = this; 
       return {x: d3.transform(g.getAttribute("transform")).translate[0], 
         y: d3.transform(g.getAttribute("transform")).translate[1]}; 
      }) 
      .on("drag", function(d) { 

       g = this; 
       translate = d3.transform(g.getAttribute("transform")).translate; 

       x = d3.event.dx + translate[0], 
       y = d3.event.dy + translate[1]; 


       d3.select(g).attr("transform", "translate(" + x + "," + y + ")"); 
       d3.event.sourceEvent.stopPropagation();    
      }); 
} 

По какой-то причине это не работает на «codepen», так что я положил его на JSFiddle и он работает отлично :)) Проблема у вас была у вас не было никакой логики в ваших функций Drag , Так что ничего не происходило.

Обновлено скрипку: http://jsfiddle.net/qqb6357j/1/

Здесь я только что назвал сопротивление как на пути и прямоугольник в нижней части JS: http://jsfiddle.net/qqb6357j/2/

Просто изменить выбор и назвать перетащить на него, чтобы дать ему возможность перетаскивания :)

Если вы хотите пойти на один шаг дальше и прекратить все взаимодействие с «путем» не дает ему никакой интерактивности (вы должны дать ему класс так, CSS может выбрать его):

#path{ 
    pointer-events:none; 
} 

Обновлено скрипку: http://jsfiddle.net/qqb6357j/3/

Теперь, что вы просили. Вы сказали, что хотите, когда наведите курсор мыши на то, что хотите выделить несколько вещей, но сможете перетаскивать слои под ним. Вы не можете просто превратить событие-указатель в none, поскольку вы все еще хотите иметь возможность «зависания», поэтому я создал timeout. Это происходит, когда вы наводите на него курсор, pointer-event = none; в течение 1 секунды и через 1 секунду: указатель-события = все;

Вот код:

.on('mouseover', function(){ 
    p.classed('path', true); 
    setTimeout(function() { 
     p.classed('path', false); 
    }, 1000) //timeout function 
    //r.call(drag); 
}) 

Вот класс, который получает положенный в течение 1 секунды:

.path{ 
    pointer-events:none; 
    opacity: 0.2; 
} 

Заключительная рабочая скрипка: http://jsfiddle.net/qqb6357j/6/