如何在d3.js中的svg中拖放一组矩形? [英] How to drag and drop a group of rectangles in svg in d3.js?
问题描述
我基于此拖放示例进行工作:
I worked based on this drag and drop example :
我想拖动一个组.我将两个矩形都放在单个组中，现在想拖放整个组，在我的代码中，拖放仅适用于单个矩形，而不适用于组.
I want to drag a group. I placed both rectangles in single group and now want to drag and drop whole group, in my code drag and drop works on single rectangle but not on group.
这是我的代码:
<!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中没有x或y属性变换:
There is no x or y property in SVG group elements. To position them, you have to use transform:
d3.select(this).attr("transform", "translate(" + x + "," + y + ")")
//the x and y positions here --------------------^ -------^
此外，<g>元素只是容器.例如，在下面的演示中(如前所述，使用transform定位组)，您必须单击一个矩形以拖动整个组:单击它们之间的空间没有效果.
Besides that, <g> elements are only containers. In the following demo (using transform to position the group, as already explained), for instance, you have to click in one of the rectangles to drag the whole group: clicking in the space between them has no effect.
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>
这篇关于如何在d3.js中的svg中拖放一组矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
