d3.js - 限制元素的移动，当我们拖动它时

Question

客观的:
在黑色矩形组内移动红色矩形。
黑色矩形形成一个图形，该图形被限制移动红色矩形。

window.onload=function(){

var inter = false;

//Make an SVG Container
var svgContainer = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 600);

//draw some rects
var r1 = svgContainer.append("rect")
    .attr("class", "interactive")
    .attr("x", 10)
    .attr("y", 223)
    .attr("width", 50)
    .attr("height", 150);

var r2 = svgContainer.append("rect")
    .attr("class", "interactive")
    .attr("x", 223)
    .attr("y", 10)
    .attr("width", 50)
    .attr("height", 300)
    .attr("transform", "rotate(45 220,10)");

//group of elements for limit red rect drag
var interactive = d3.selectAll(".interactive")
    .on("mouseover", function(d){
        inter = true;
    })
    .on("mouseleave", function(d){
        inter = false;
    });

// dragging function
var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
        if(inter){
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            d3.select(this).attr("transform", function(d,i){
                return "translate(" + [ d.x,d.y ] + ")"
            });
        }
    })
    .on("dragstart", function() {
        d3.select(this).style("pointer-events", "none")
    })
    .on("dragend", function() {
        d3.select(this).style("pointer-events", "auto")
    });

// red rectangle for draging
var r = svgContainer.append("rect")
    .attr("x", 150)
    .attr("y", 100)
    .attr("width", 20)
    .attr("height", 20)
    .attr("fill", "red")
    .data([ {"x":0, "y":0} ])
    .call(drag);

}

http://codepen.io/anon/pen/pjorBb

这是我的主题示例。
但它不能正常工作。
也许有人有类似的正确示例或提供如何正确执行的线索。

Answer 1

我过去也遇到过类似的情况，这就是我克服这个问题的方法。

当我拖动小元素时，我使用 getXY()函数来确定被拖动元素的 x, y。
getXY()将采用鼠标坐标( d3.mouse(this) )和 x, y , width, height内部和外部对象。然后它将确定是否返回鼠标坐标(在这种情况下，外部对象的边框坐标)。

我希望你能明白。我想你可以用它来解决你的问题。

这是我原来的帖子。 d3js transforming nested group images