如何手动触发d3的拖动事件

Question

全部：

假设有两层（顶层是 SVG:PATH，底层是 SVG:RECT，顶层覆盖底层），我想将 D3 拖动到 RECT 层，鼠标悬停到 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/

现在，你要求什么。你说你想要当鼠标悬停时你想要突出一些东西但能够拖动它下面的图层。您不能只是将指针事件变为无，因为您仍然希望拥有“悬停”能力，所以我创建了一个 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);
})

这是上一秒的课程：

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

最后的工作小提琴：http://jsfiddle.net/qqb6357j/6/