Javascript 为什么d3.js组元素在第一次拖动时会跳跃？

我需要创建一个d3组，其中包含一些形状（如矩形、圆形等），并且必须是可拖动的。拖动可以工作，但当拖动开始时，形状会“跳跃”。我知道我需要类似于

.attr（“x”，d.x=d3.event.x）

的东西。但是我得到了一个错误，“d”是未定义的。我怎样才能修复“跳跃”？ 下面是一个非常简单的代码：

var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%");

rectGroup();

function rectGroup() {
var group = svg.append('g')
    .attr("class", "group")
    .call(d3.drag()
        .on("drag", dragged));

group.append("rect")
    .data([{ x: 200, y: 200, width: 100 , height: 100}])
    .attr('class', 'rect')
    .attr("x", function(d) { return d.x; })
    .attr('y', function(d) { return d.y; })
    .attr('width', function(d) { return d.width; })
    .attr('height', function(d) { return d.height; });
}

function dragged(d) {
d3.select(this).select("rect").attr("x", d3.event.x)
d3.select(this).select("rect").attr("y", d3.event.y)
}

---

您正在组上调用

拖动
。但是，您正在使用拖动的
函数中矩形的
x
和
y
属性

您必须决定要在矩形或组上调用
拖动
，然后在此决定之后，您必须相应地更改代码

例如，如果要保留对组的拖动，则必须使用
translate
：

function dragged(d) {
    d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + 
    "," + (d.y = d3.event.y) + ")")
}

设置组的
x
和
y
数据后

以下是演示：


var svg=d3.select（“body”）.append（“svg”）
.attr（“保存Aspectratio”、“xMinYMin满足”）
.attr（“视图框”，“0 0 960 600”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）；
直肠群（）；
函数组（）{
var group=svg.append（'g'）
.基准({
x:0,，
y:0
})
.attr（“类”、“组”）
.call（d3.drag（）
.打开（“拖动”，拖动））；
组。追加（“rect”）
.数据([{
x:200，
y:200，
宽度：100，
身高：100
}])
.attr（'class'，'rect'）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（'y'，函数（d）{
返回d.y；
})
.attr（'width'，函数（d）{
返回d.width；
})
.attr（高度），功能（d）{
返回d.高度；
});
}
函数（d）{
d3.选择（this.attr）（“transform”，“translate”（+（d.x=d3.event.x）+）”，“+（d.y=d3.event.y）+”）
}
嗨，杰拉尔多·福塔多，我还没有完全理解它，但它确实有效。所以我需要更深入地研究“翻译”。坦克！