如何手动触发d3的拖动事件 [英] How to manually trigger the drag event of d3

问题描述

全部：

假设有两层（顶层是SVG：PATH，底层是SVG：RECT，顶层覆盖底层），我想应用D3拖动到RECT图层和鼠标悬停到PATH图层，任何人都可以告诉我如何做？

下面的代码只能工作在路径LAYER：

  var svg = d3.select（svg）; 
 svg.style（width，400px）
 .style（height，400px）
 .style（border，1px solid gray）; 
 
 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（）{
 returnM0 0 L380 0 L300 300L0 380Z; 
}）
 .style（fill，function（）{
 returnrgba（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）;感谢
解决方案   div> 
我改变了你的拖动。也将其更改为一个函数：
  function drag（）{
 console.log（'dragging'）; 
 return d3.behavior.drag（）
 .origin（function（）{
 var g = this; 
 return {x：d3.transform（g.getAttribute ））。translate [0]，
y：d3.transform（g.getAttribute（transform））。translate [1]}; 
}）
 .on ，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 translate（+ x +，+ y +））; 
 d3.event.sourceEvent.stopPropagation（）; 
}）; 
} 
  
由于某些原因，这不适用于'codepen'，所以我把它放在JSFiddle并且它工作正常:)）你的问题是你没有逻辑在你的拖动功能。 
 
 
 
更新的小提琴： http：/ /jsfiddle.net/qqb6357j/1/  
 
 
 
这里我刚刚在JS的底部的路径和矩形上拖动： http://jsfiddle.net/qqb6357j/2/  
 
 
 
只需更改选择，并调用拖动就可以给它拖动能力:) 
 
 
 
如果你想进一步，停止所有的交互与'给它没有交互性（你必须给它一个类，所以css可以选择它）：
  #path {
 pointer-events：none; 
} 
  
更新小提琴： http://jsfiddle.net/qqb6357j/3/  
 
 
 
现在，您要的是。你说你想要当mouseover你想突出一些事情，但能够拖动它下面的图层。你不能只是将指针事件转为无，因为你仍然希望有悬停能力，所以我创建了一个超时。这是当你悬停在它的时候，pointer-event = none; 1秒和1秒后：pointer-events = all; 
 
 
 
以下是代码：
  ，function（）{
 p.classed（'path'，true）; 
 setTimeout（function（）{
 p.classed（'path'，false）; 
} ，1000）// timeout function 
 //r.call(drag）; 
}）
  
这里是放置1秒的类：
  .path {
 pointer-事件：none; 
 opacity：0.2; 
} 
  
 Final working fiddle： http://jsfiddle.net/qqb6357j/6/  
 
All:

Suppose there are two layers( the top one is SVG:PATH, the bottom layer is a SVG:RECT, the top layer covers the bottom layer), I want to apply D3 drag to the RECT layer and mouseover to PATH layer, could anyone show me how to do that?

THE CODE BELOW CAN ONLY WORK WITH THE path LAYER:
        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);
Thanks
解决方案
I changed your drag. Also changed it to a function :
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();             
            });
}
For some reason this doesnt work on 'codepen' so i put it on JSFiddle and it works fine :)) The problem you had was you had no logic in your Drag functions. So nothing was happening.

Updated fiddle : http://jsfiddle.net/qqb6357j/1/

Here I have just called drag on both the path and rectangle at the bottom of the JS: http://jsfiddle.net/qqb6357j/2/

Just change the selection and call drag on it to give it drag capability :) 

If you want to go one step further and stop all interaction with the 'path' give it no interactivity (you have to give it a class so css can select it):
#path{
    pointer-events:none;
}
Updated fiddle : http://jsfiddle.net/qqb6357j/3/

Now, what you asked for. You said you wanted when mouseover you want to highlight a number of things but be able to drag the layers below it. You can't just turn pointer-event to none as you still want to have 'hover' ability so i created a timeout. This is so when you hover over it, pointer-event=none; for 1 second and after 1 second : pointer-events= all; 

Here is the code :
.on('mouseover', function(){
    p.classed('path', true);
    setTimeout(function() {
        p.classed('path', false);
    }, 1000) //timeout function
    //r.call(drag);
})
Here is the class that gets put on for 1 second : 
.path{
    pointer-events:none;
    opacity: 0.2;
}
Final working fiddle : http://jsfiddle.net/qqb6357j/6/

                        
这篇关于如何手动触发d3的拖动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！