Question

所有

假设有两个层（顶层是SVG：PATH，底层是SVG：RECT，顶层覆盖底层），我想将D3拖动应用于RECT层并将鼠标悬停到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);

由于

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();             
            });
}

出于某种原因，这对于＃code;＆＃39;所以我把它放在JSFiddle上它工作正常:)）你遇到的问题是你的拖拽功能没有逻辑。没有发生任何事情。

更新了小提琴：http://jsfiddle.net/qqb6357j/1/

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

只需更改选择并调用拖动即可为其提供拖动功能:)

如果您想更进一步，请停止与“路径”的所有互动。没有交互性（你必须给它一个类，所以css可以选择它）：

#path{
    pointer-events:none;
}

更新了小提琴：http://jsfiddle.net/qqb6357j/3/

现在，你要的是什么。你说你想在鼠标移动时想要突出显示许多内容但是能够拖动它下面的图层。您不能将指针事件转为无，因为您仍然希望将鼠标悬停在“无法”状态。能力所以我创建了timeout。当你将鼠标悬停在它上面时，指针事件=无; 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/

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

1 个答案: