Javascript 基于鼠标坐标的拖放线

拖放形状时放置在错误的坐标上。我非常接近使用translate-transform实现它，但是缺少了一些东西。我该如何解决这个问题

检查小提琴：

代码：

var svg=d3.select（“#canvas”）
.append（“svg”）
.attr（“宽度”，800）
.attr（“高度”，803）；
var clientX、clientY、offsetX、offsetY；
变量x，y；
var shapeId=“”；
函数getId（id）
{
shapeId=id；
console.log（shapeId）；
}
函数createShape（事件）
{
var$stageContainer=$（“#画布”）；
var stageOffset=$stageContainer.offset（）；
clientX=event.clientX；
clientY=event.clientY；
offsetX=stageOffset.left；
offsetY=stageOffset.top；
x=客户x-抵销x；
y=客户y-offsetY；
log（“x为：+x++++”y为：+y）；
开关（shapeId）
{
case（'newConnector'）：
创建线（x，y）；
打破
违约：
log（“无需拖动”）；
}
}
函数createLine（x，y）
{
追加（“路径”）
.attr（“d”，“M 100 L 400 100 z”）
.attr（“变换”、“平移”（“+x+”，“+y+”））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）
.style（'光标'，'移动'）
.呼叫（拖动）；
}
函数getTranslate（t）{
var translate=d3.transform（t.getAttribute（“transform”）.translate；
返回{
x:数字（翻译为[0]），
y:数字（翻译为[1]）
};
}
var drag=d3.behavior.drag（）
.来源（功能）
{
返回getTranslate（此）；
})
.打开（“拖动”，移动）；
功能移动（d）{
var x=d3.event.x；
变量y=d3.event.y；
d3.选择（this）.attr（“transform”、“translate”（+x+）、“+y+”）；
}

当您附加路径时，您正在执行M 100 100-这将相对于原点移动线100 x单位和100 y单位。只需将其设置为0

...
svg.append("path")
   .attr("d", 'M 0 0 L 400 0 z')

---

更新的Plunker-

...
svg.append("path")
   .attr("d", 'M 0 0 L 400 0 z')