javascript 如何使用 d3.js 拖动行为拖动 svg 组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15943292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to drag an svg group using d3.js drag behavior?
提问by Sudarshan
I am using D3js drag. single element is get dragged perfectly fine. but i want to drag a group of elements.How it can be done. Here is what is on my Js Fiddle link:
我正在使用D3js 拖动。单个元素被完美地拖动。但我想拖动一组元素。怎么做。这是我的Js Fiddle 链接上的内容：
function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler)
.on("dragend", dropHandler);
return drag;
}
var g = d3.select("body").select("svg").append("g")
.data([{ x: 50, y: 50 }]);
g.append("rect")
.attr("width", 40)
.attr("height", 40)
.attr("stroke", "red")
.attr("fill","transparent")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
g.append("text")
.text("Any Text")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
function dropHandler(d) {
// alert('dropped');
}
function dragmove(d) {
d3.select(this)
.attr("x", d.x = d3.event.x)
.attr("y", d.y = d3.event.y);
}
I want to drag both rect and text simultaneously. Here is what I tried, but no luck. I think am missing something simple.
我想同时拖动矩形和文本。这是我尝试过的，但没有运气。我认为缺少一些简单的东西。
回答by Erik Dahlstr?m
First off, the <g> element doesn't care about xand yattributes (as in: they're just ignored). You can use transform="translate(x,y)"instead.
首先， <g> 元素不关心xandy属性（例如：它们只是被忽略了）。你可以transform="translate(x,y)"改用。
Second, you will need to check that the element you get in the dragmove handler actually is the <g> element, and not a child element of it. This is because <g> elements have no actual hit area themselves. Their children do though, and the mouse events first go to the children then bubble up to the parent. You can inspect evt.targetand evt.currentTargetto see this in action. targetis the element that was hit originally, currentTargetis the event target that is currently handling the event (e.g the <g> element if the event bubbled up).
其次，您需要检查在 dragmove 处理程序中获得的元素实际上是 <g> 元素，而不是它的子元素。这是因为 <g> 元素本身没有实际的命中区域。但是他们的孩子会这样做，鼠标事件首先到达孩子，然后冒泡到父母。您可以检查evt.target并evt.currentTarget查看此操作。target是最初被命中的元素，currentTarget是当前正在处理事件的事件目标（例如，如果事件冒泡，则为 <g> 元素）。
回答by v4gil
For d3 v4:
对于 d3 v4：
var drag_this = d3.drag().subject(this)
.on('start',function (d) {
if (d.x1){
d.x1 = d3.event.x - d.xt;
d.y1 = d3.event.y - d.yt;
}else{
d.x1 = d3.event.x;
d.y1 = d3.event.y;
}
})
.on('drag',function(d){
d3.select(this)
.attr("transform", "translate(" + (d3.event.x - d.x1) + "," + (d3.event.y - d.y1) + ")");
d.xt = d3.event.x - d.x1;
d.yt = d3.event.y - d.y1;
});
my_group.call(drag_this);
This assumes that you have data bound to the group.
这假设您将数据绑定到该组。
