[英]d3.js place holder graphic when dragging the SVG element
我正在为查询语言创建可视化作曲家。 我有3个不同的SVG矩形元素(例如A->运算符,B-> Some_Objects,C->绘图画布)。 我想将元素从A,B拖到C。如果用户将元素从A / B拖到C,则应该在C中绘制相同的元素,并且它也必须存在于A / B中。 同时,如果用户未将元素拖放到C中,则不应执行任何操作。
为此,我尝试使用占位符技术(例如jQuery UI)。 但是我找不到怎么做。 谁能帮我这个?
这是我到目前为止创建的UI。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/live.js"></script>
<script src="js/d3.v3.min.js"></script>
</head>
<body>
<svg width="1024" height="768" style="background-color: #204d74">
<!--<g>-->
<rect x="10" y="20" height="250" width="300" style="fill: #080808"></rect>
<rect class="drg" x="12" y="22" height="50" width="50" style="fill: #f0ad4e"></rect>
<!--</g>-->
<rect x="10" y="280" height="250" width="300" style="fill: #080808"></rect>
<rect class="drg" x="12" y="282" height="50" width="50" style="fill: #f0ad4e"></rect>
<rect x="320" y="20" height="510" width="690" style="fill: #080808"></rect>
</svg>
<script>
function move() {
d3.select(this)
// .attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
.attr('x', d3.event.x - parseInt(d3.select(this).attr("width")) / 2)
.attr('y', d3.event.y - parseInt(d3.select(this).attr("height")) / 2)
;
this.parentNode.appendChild(this);
}
d3.selectAll(".drg").style("fill","red").call(d3.behavior.drag().on('drag', move).origin(function() {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
}).on('dragend', function(d){
console.log('end')
})
)
</script>
</body>
</html>
在dragEnd上,您必须找到当前的鼠标坐标,并基于此坐标,克隆被拖动的当前元素并重置原始元素的x和y位置。
已经创建了一个jsFiddle来显示它。 看看这个
.on('dragend', function(d){
var elem = d3.select(this);
elem.attr("x",elem.attr("initial-x"));
elem.attr("y",elem.attr("initial-y"));
console.log(elem.attr("x"));
var mouseCoordinates = d3.mouse(this);
if(mouseCoordinates[0] > 320) {
//Append new element
d3.select("svg").append("rect")
.classed("drg", true)
.attr("width", 50)
.attr("height", 50)
.attr("x", mouseCoordinates[0])
.attr("y", mouseCoordinates[1])
.style("fill", "green");
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.