javascript-如何在d3.js中的svg中拖放一组矩形?
作者:互联网
我基于this拖放示例进行工作:
我想拖动一个组.我将两个矩形都放在单个组中,现在想拖放整个组,在我的代码中,拖放仅适用于单个矩形,而不适用于组.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> </script>
<title>Drag And Drop</title>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
var vizSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 300);
var group =d3.select("svg")
.append("g")
.attr("id","group1")
.attr("x",50)
.attr("y", 140)
//.attr("fill", "yellow")
// .call(d3.behavior.drag().on("drag", move));
group.append("rect")
.attr("id", "bluerect")
.attr("x", 50)
.attr("y", 140)
.attr("width", 50)
.attr("height", 50)
.attr("stroke", "red")
.attr("fill", "blue")
.attr("opacity","0.5")
.call(d3.behavior.drag().on("drag", move));
group.append("rect")
.attr("id", "redrect")
.attr("x", 110)
.attr("y", 140)
.attr("width", 50)
.attr("height", 50)
.attr("stroke", "blue")
.attr("fill", "red")
.call(d3.behavior.drag().on("drag", move));
function move(){
this.parentNode.appendChild(this);
var dragTarget = d3.select(this);
dragTarget
.attr("x", function(){;return d3.event.dx + parseInt(dragTarget.attr("x"))})
.attr("y", function(){return d3.event.dy + parseInt(dragTarget.attr("y"))});
};
</script>
</body>
</html>
解决方法:
SVG group elements中没有x或y属性.要定位它们,必须使用transform:
d3.select(this).attr("transform", "translate(" + x + "," + y + ")")
//the x and y positions here --------------------^ -------^
除此之外,< g>元素只是容器.例如,在下面的演示中(如前所述,使用transform定位组),您必须单击一个矩形以拖动整个组:单击它们之间的空间没有任何效果.
var g = d3.select("g")
.datum({
x: 0,
y: 0
})
.call(d3.drag()
.on("drag", function(d) {
d3.select(this).attr("transform", "translate(" +
(d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")")
}))
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<g>
<rect x="40" y="10" width="50" height="20" fill="teal"></rect>
<rect x="60" y="40" width="50" height="20" fill="teal"></rect>
<rect x="30" y="35" width="20" height="20" fill="teal"></rect>
</g>
</svg>
标签:svg,d3-js,drag-and-drop,javascript,jquery 来源: https://codeday.me/bug/20191111/2020702.html