拖放形状被放置在错误的坐标上。我非常接近使用翻译变换来实现它，但还缺少一些东西。我该如何解决这个问题？
检查 fiddle :http://plnkr.co/edit/FmWL4pACdw1haCLXsCZt?p=preview
代码:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/standard.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/d3.min.js"></script>
</head>
<body>
<div id="content">
<div style="position: relative; height: 100%;">
<div><a id="newConnector" title="Add new sequence/data/message flow" draggable="true" ondragstart=getId(this.id) ondragend="createShape(event)"><img src="images/sequence.png"></a></div>
</div>
<div id="canvas" tabindex="0">
<script>
var svg = d3.select('#canvas')
.append("svg")
.attr("width", 800)
.attr("height", 803);
var clientX, clientY, offsetX, offsetY;
var x, y;
var shapeId = "";
function getId(id)
{
shapeId = id;
console.log(shapeId);
}
function createShape(event)
{
var $stageContainer = $("#canvas");
var stageOffset = $stageContainer.offset();
clientX = event.clientX;
clientY = event.clientY;
offsetX = stageOffset.left;
offsetY = stageOffset.top;
x = clientX - offsetX;
y = clientY - offsetY;
console.log("x is: " + x + " " + "y is: " + y);
switch (shapeId)
{
case('newConnector'):
createLine(x, y);
break;
default:
console.log("Nothing to drag");
}
}
function createLine(x, y)
{
svg.append("path")
.attr("d", 'M 100 100 L 400 100 z')
.attr("transform", "translate(" + x + "," + y + ")")
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none")
.style('cursor', 'move')
.call(drag);
}
function getTranslate(t) {
var translate = d3.transform(t.getAttribute("transform")).translate;
return {
x: Number(translate[0]),
y: Number(translate[1])
};
}
var drag = d3.behavior.drag()
.origin(function ()
{
return getTranslate(this);
})
.on("drag", move);
function move(d) {
var x = d3.event.x;
var y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}
</script>
</div>
</div>
</div>
</body>
</html>
最佳答案
当您附加路径时，您正在执行 M 100 100 - 这会将线相对于原点移动 100 x 单位和 100 y 单位。只需将其设置为 0
...
svg.append("path")
.attr("d", 'M 0 0 L 400 0 z')
更新了 Plunker - http://plnkr.co/edit/ba5olqX88izPK1G66DrK?p=preview
关于javascript - 根据鼠标坐标拖放线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32224027/