如何手动触发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 上，它工作正常:)）你遇到的问题是你的拖动函数没有逻辑。所以什么也没发生。

已更新 fiddle：http://jsfiddle.net/qqb6357j/1/

在这里，我刚刚在 JS 底部的路径和矩形上都调用了拖动：http://jsfiddle.net/qqb6357j/2/

只需更改 selection 并在其上调用 drag 以赋予其拖动能力:)

如果你想更进一步并停止与 'path' 的所有交互，请不要给它交互（你必须给它一个 class 所以 css 可以 select它）：

#path{
    pointer-events:none;
}

已更新 fiddle：http://jsfiddle.net/qqb6357j/3/

现在，你所要求的。你说你想要当鼠标悬停时你想要突出显示一些东西但能够拖动它下面的层。你不能只将指针事件变成 none，因为你仍然想拥有 'hover' 能力，所以我创建了一个 timeout。当你将鼠标悬停在它上面时就是这样，pointer-event=none;持续 1 秒和 1 秒后：pointer-events= all；

这是代码：

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

这是穿上 1 秒的 class：

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

最终工作 fiddle：http://jsfiddle.net/qqb6357j/6/

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

How to manually trigger the drag event of d3

events

drag

d3.js