[英]using d3 drag behavior's origin to create a “drag handle” for a tree node
[英]How to set the Origin (drag.origin) for drag behavior in d3 JavaScript library
我正在尝试使用d3框架为包含HTML文本和背景矩形的组实现拖动行为。 我能够让它工作,虽然没有设置drag.origin我可以看到由于鼠标位置/元素坐标偏移引起的显着跳跃。 究竟是如何在d3 wiki页面上描述的虽然页面描述了如何设置拖动的Origin,但是我没有正确理解如何在我的例子中实现它。 我尝试了两种不同的方法:使用元素将元素组合在一起并定义新元素保持tose。 在第一种情况下,我必须使用translate-function,我甚至不知道如何获得组的坐标。
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var group = svg.append("svg:g")
.attr("transform", "translate(10, 10)")
.attr("id", "group");
var rect1 = group.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5);
var html1 = group.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 200)
.attr("height", 100)
.attr("id", "fobject")
.style("border-color", d3.scale.category20c())
.append("xhtml:div")
.style("font", "14px 'Helvetica Neue'")
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");
var innerSvg = svg.append("svg")
.attr("x", 500)
.attr("y", 10)
.attr("id", "innerSvg");
var rect2 = innerSvg.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5);
var html2 = innerSvg.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 200)
.attr("height", 100)
.attr("id", "fobject")
.style("border-color", d3.scale.category20c())
.append("xhtml:div")
.style("font", "14px 'Helvetica Neue'")
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");
var drag1 = d3.behavior.drag()
.on("drag", function(d,i) {
d3.select(this).attr("transform", function(d,i){
return "translate(" + [ d3.event.x,d3.event.y ] + ")"
})
});
var drag2 = d3.behavior.drag()
.on("drag", function(d,i) {
d3.select(this)
.attr("x", d3.event.x)
.attr("y", d3.event.y);
});
group.call(drag1);
innerSvg.call(drag2);
我非常感谢任何解释,我自然在这里准备了一个工作示例: http : //jsfiddle.net/Y8y7V/
您只需相应地设置origin()
函数。 在第二种情况下,这很简单,在第一种情况下有点困难,因为您使用坐标和变换。 基本模式(对于第二种情况)看起来像这样:
.origin(function() {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})
在这里更新了jsfiddle。
group元素没有x / y属性 - 没问题! 创造一个:
var node = svg.append("g")
.attr('x',x_1)
.attr('y',y_1)
.attr("class","node")
.attr("name","Node_A")
.attr("transform","translate(" + x_1 + ", " + y_1 +")")
.call(drag);
什么时候,Lars的.origin功能会起作用
并且不要忘记在拖动时更新x,y属性:
function dragged() {
d3.select(this).attr("transform","translate(" + d3.event.x + ", " + d3.event.y +")");
d3.select(this).attr("x",d3.event.x);
d3.select(this).attr("y",d3.event.y);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.