客观的:
在黑色矩形组内移动红色矩形。
黑色矩形形成一个图形,该图形被限制移动红色矩形。
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
这是我的主题示例。
但它不能正常工作。
也许有人有类似的正确示例或提供如何正确执行的线索。
最佳答案
我过去也遇到过类似的情况,这就是我克服这个问题的方法。
当我拖动小元素时,我使用 getXY()
函数来确定被拖动元素的 x, y。getXY()
将采用鼠标坐标( d3.mouse(this)
)和 x, y , width, height
内部和外部对象。然后它将确定是否返回鼠标坐标(在这种情况下,外部对象的边框坐标)。
我希望你能明白。我想你可以用它来解决你的问题。
这是我原来的帖子。 d3js transforming nested group images
关于d3.js - 限制元素的移动,当我们拖动它时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32324721/