Javascript D3js：使用其中一个拖动组'；孩子们

Jsfiddle：

代码：

我试图通过使用一个组的子对象作为句柄来拖动组。简单地说，我想做的是，当拖动一个组的子对象时：

• 得到群的平移变换
• 从d3.event.dx、d3.event.dy获取拖动距离
• 将差异应用于组的变换属性

拖动子对象时，组不会按预期移动。它移动的距离小于拖动的距离，并开始四处跳跃

我做错了什么

编辑：

更新的JSFIDLE:

---

我试图通过使用一个或多个组的子级作为拖动手柄来拖动整个组。

使用

g=this

而不是

g=this.parentNode
这是一个老问题，但没有真正得到回答。我遇到了完全相同的问题，只想拖动一个子组（不是
的所有子元素）。
问题是，
d3.event.dx/y
是相对于
的位置计算的。当
被
.attr（“transform”，“translate（x，y）”）
移动后，
d3.event.dx/dy
将调整为新的（较小的）值。这会导致光标以大约一半的速度突然移动。我找到了两种可能的解决方案：

首先（最后我采用了这种方法）：

将拖动句柄rect直接附加到svg，而不是
。因此，它是相对于
定位的，而不是相对于
定位的。然后在on drag功能内同时移动（代码）和（代码）


var svg=d3.选择（“svg”）；
var组=svg
.附加（“g”）.attr（“id”、“组”）
.attr（“转换”、“翻译（0,0）”）；
组
.append（“rect”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，100）
.attr（“高度”，100）
.style（“填充”、“绿色”）
.样式（“不透明度”，0.4）；
组
.append（“文本”）
.attr（“x”，10）
.attr（“y”，5）
.attr（“主要基线”、“悬挂”）
.text（“拖动我”）；
handle=svg
.append（“rect”）
.数据([{
//矩形的位置
x:0,，
y:0
}]) 
.attr（“类”、“拖拽”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，100）
.attr（“高度”，20）
.style（“填充”、“蓝色”）
.样式（“不透明度”，0.4）
.attr（“光标”、“移动”）
.call（d3.drag（）.on（“drag”），函数（d）{
控制台日志（“是”）；
d、 x+=d3.event.dx；
d、 y+=d3.event.dy；
//移动手柄矩形
d3.选择（本）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（d）{
返回d.y；
});
//移动组
d3.选择（“#组”）.attr（“变换”、“平移”（+[d.x，d.y]+”））；
}));

使用
拖动.container（）
设置容器访问器

请参阅。
但我意识到这并不能解决您拖动一组节点的意图；如果您发布一个示例，其中有一组矩形，而不仅仅是一个矩形，可能会有所帮助？或者更类似于您想要的示例。所以基本上矩形是作为svg组元素的，对吗（基于原始海报问题）？？如果将拖动行为附加到
g
元素，它实际上是以相同的方式工作的——是的，Lars，这是我之前的回答。正如我在附带的评论中提到的，如果目的是拖动一个组，那么示例应该包含一个组，而不仅仅是一个矩形。好吧，虽然g是一个群，也许这就解决了：）。但想想看，“g”在这里不是一个误称吗？它指的是矩形，而不是SVG约定中的真正
g
元素。谢谢。但在实现中，组将包含多个子项，如文本节点、形状等，并且翻译应应用于整个组，以便能够同时翻译所有子项。因此，g=这并不能解决问题。我将更新示例。我已将呼叫附加到g组。它对我有用。孩子们不需要它，但你也可以把它留在那里。这是你的电话号码。
var in_editor_drag = d3.behavior.drag()
             .origin(function() {
                var g = this.parentNode;
                return {x: d3.transform(g.getAttribute("transform")).translate[0],
                        y: d3.transform(g.getAttribute("transform")).translate[1]};
            })
            .on("drag", function(d,i) {

                g = this.parentNode;
                translate = d3.transform(g.getAttribute("transform")).translate;
                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];
                d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                d3.event.sourceEvent.stopPropagation();
            });

svg = d3.select("svg");
d = {x: 20, y: 20 };
groups = svg
        .append("g")
        .attr("transform", "translate(20, 20)");

groups
    .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 100)
        .attr("height", 100)
        .style("fill", "green")
        .call(in_editor_drag)
        .style("opacity", 0.4);