当我们拖动它时,限制元素的移动

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

这不是一个完美的解决方案。但您可能会从这个演示中了解如何实现该功能。

//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)");

function pointRectangleIntersection(p, r) {
    return p.x >= r.x1 && p.x <= r.x2 && p.y >= r.y1 && p.y <= r.y2;
}
// dragging function
var drag = d3.behavior.drag()         
	.on("drag", function(d,i) {           
            var pt1 = d3.mouse(r1.node());
            var point1 = {x: pt1[0], y: pt1[1]};
            var bbox1 = r1.node().getBBox();
            var rect1 = { x1: bbox1.x, x2: bbox1.x+bbox1.width, y1: bbox1.y, y2: bbox1.y+bbox1.height };
            var pt2 = d3.mouse(r2.node());
            var point2 = {x: pt2[0], y: pt2[1]};
            var bbox2 = r2.node().getBBox();
            var rect2 = { x1: bbox2.x, x2: bbox2.x+bbox2.width, y1: bbox2.y, y2: bbox2.y+bbox2.height };  
            
            if(pointRectangleIntersection(point1, rect1) || pointRectangleIntersection(point2, rect2)){ 
                if(pointRectangleIntersection(point1, rect1)){
                   d.x = Math.max(0, Math.min(rect1.x2 - 20, d3.event.x));
                   d.y = Math.max(0, Math.min(rect1.y2 - 20, d3.event.y));
                } else{
                   d.x = Math.max(0, Math.min(rect2.x2 - 20, d3.event.x));
                   d.y = Math.max(0, Math.min(rect2.y2 - 20, d3.event.y));
                }              
                d3.select(this).attr("x", d.x);
                d3.select(this).attr("y", d.y);
                d3.event.sourceEvent.stopPropagation();             
            }
		
	});	
	
// red rectangle for draging
var r = svgContainer.append("rect")
	.attr("x", 150)
	.attr("y", 100)
	.attr("width", 20)
	.attr("height", 20)
	.attr("fill", "red")
	.datum({"x":0, "y":0})
	.call(drag);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>