Javascript D3不正确的阻力特性

这是我上一个问题的后续问题

两个问题：

不正确的拖动行为。单击第二个矩形拖动它时，它会跳到第三个矩形所在的位置

我添加了一个匿名函数，当svg在任何地方单击时运行。这将添加一个新的rect。然而，这是工作的关键

我知道我应该每个问题只有一个问题，但这些问题是相关的，我怀疑它们会一起解决

/*.主动{
行程：#000；
笔画宽度：2px；
}*/
var保证金={
前20名，
右:20,，
底数：20，
左：20
},
宽度=600-边距。左侧-边距。右侧，
高度=600-margin.top-margin.bottom；
var svg=d3.选择（“svg”）；
风险值数据=[{
x:200
}, {
x:300
}, {
x:400
}];
var groove=svg.append（“g”）
.attr（“类别”、“groove_集团”）；
groove.append（“rect”）
.attr（“x”，100）
.attr（“y”，150）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，6）
.attr（“宽度”，800）
.样式（“填充”、“灰色”）；
groove.append（“rect”）
.attr（“x”，102）
.attr（“y”，152）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，2）
.attr（“宽度”，796）
.样式（“填充”、“黑色”）；
//创建组
var group=svg.selectAll（空）
.数据（数据）
.enter（）.append（“g”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
组。追加（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，100）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“浅蓝色”）
.attr（'id'，函数（d，i）{
返回“句柄”+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）；
组。追加（“文本”）
.attr（“x”，函数（d）{
返回d.x
})
.attr（“y”，100）
.attr（“文本锚定”、“开始”）
.样式（“填充”、“黑色”）
.文本（功能（d）{
返回“x:+d.x
});
//创建组
var group=svg.selectAll（“g”）
.数据（数据）
.enter（）.append（“g”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
组。追加（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，200）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“浅蓝色”）
.attr（'id'，函数（d，i）{
返回“句柄”+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）；
组。追加（“文本”）
.attr（“x”，函数（d）{
返回d.x
})
.attr（“y”，200）
.attr（“文本锚定”、“开始”）
.样式（“填充”、“黑色”）
.文本（功能（d）{
返回“x:+d.x
});
打开（“单击”，函数（）{
var coords=d3.鼠标（此）；
var newData={
x:d3.event.x，
}
data.push（newData）；
group.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，200）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“钢蓝”）
.attr（'id'，函数（d，i）{
返回'rect_'+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）；
});
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
d3.选择（这个）。选择（“文本”）
.attr（“x”，d.x=d3.event.x）；
d3.选择（这个）。选择（“rect”）
.attr（“x”，d.x=d3.event.x）；
}
函数d（d）{
d3.选择（本）
.分类（“活动”，虚假）；
}
函数删除（d）{
d3.event.stopPropagation（）；
data=data.filter（函数（e）{
返回e！=d；
});
d3.选择（本）
.remove（）；
}

要正确执行拖放操作，请按如下方式重写代码：

var保证金={
前20名，
右:20,，
底数：20，
左：20
},
宽度=600-边距。左侧-边距。右侧，
高度=600-margin.top-margin.bottom；
var svg=d3.选择（“svg”）；
风险值数据=[{
x:200
}, {
x:300
}, {
x:400
}];
var groove=svg.append（“g”）
.attr（“类别”、“groove_集团”）；
groove.append（“rect”）
.attr（“x”，100）
.attr（“y”，150）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，6）
.attr（“宽度”，800）
.样式（“填充”、“灰色”）；
groove.append（“rect”）
.attr（“x”，102）
.attr（“y”，152）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，2）
.attr（“宽度”，796）
.样式（“填充”、“黑色”）；
//创建组
var group=svg.selectAll（空）
.数据（数据）
.enter（）.append（“g”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
组。追加（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，100）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“浅蓝色”）
.attr（'id'，函数（d，i）{
返回“句柄”+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）；
组。追加（“文本”）
.attr（“x”，函数（d）{
返回d.x
})
.attr（“y”，100）
.attr（“文本锚定”、“开始”）
.样式（“填充”、“黑色”）
.文本（功能（d）{
返回“x:+d.x
});
打开（“单击”，函数（）{
var coords=d3.鼠标（此）；
var newData={
x:d3.event.x，
}
data.push（newData）；
group.selectAll（“rect”）
.数据（数据）
.exit（）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，200）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“钢蓝”）
.attr（'id'，函数（d，i）{
返回'rect_'+i；
})
.attr（“rx”，6）
var newGroup = svg.selectAll(".group")
    .data(data, function(d) {
        return d.x
    })
    .enter()
    .append("g")
    //etc...

newGroup.append("rect")
    //etc...

.data(data, function(d){return d.x})