如何使用D3移动（拖放）多个形状 [英] How To Move (Drag and Drop) multiple Shapes with D3
本文介绍了如何使用D3移动（拖放）多个形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用d3移动（拖放）多个形状。
How do I move (drag and drop) multiple shapes with d3.
我尝试在svg中放置一些形状并移动svg - 这个工作不顺利。
这是我到目前为止
I tried putting some shapes in a svg and move the svg - this works but not smoothly. This is what I got so far
<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
<title>Creating SVG groups with D3.js</title>
</head>
<body>
<script type="text/javascript">
// http://tutorials.jenkov.com/svg/g-element.html
d3image = d3.select("body");
svgcanvas = d3image.append("svg:svg").attr("width", 700).attr("height", 500);
svg1 = svgcanvas.append("svg:svg").attr("x", 100).attr("y", 100);
circle1 = svg1.append("svg:circle")
.attr("cx", 40)
.attr("cy", 40)
.attr("r", 37.5)
.call(d3.behavior.drag().on("drag", move));
rect1 = svg1.append("svg:rect")
.attr("x",0)
.attr("y",50)
.attr("width",100)
.attr("height",75)
.call(d3.behavior.drag().on("drag", move));
text1 = svg1.append("svg:text")
.text("Group 1")
.attr("x", 0)
.attr("y", 70)
.style("stroke", "orange")
.style("stroke-width", 1)
.style("font-size", "150%")
.style("fill", "orange")
.call(d3.behavior.drag().on("drag", move));
function move(){
var parent = d3.select(this.parentNode);
parent.attr("x", function(){return d3.event.dx + parseInt(parent.attr("x"))})
.attr("y", function(){return d3.event.dy + parseInt(parent.attr("y"))});
};
</script>
</body>
</html>
任何建议？
推荐答案
您可以尝试修复svg元素的位置，在其下创建一个组，并在拖动任何对象时翻译该组。在这个问题中，您可以找到有关此方法的更多详细信息：
You could try fixing the position of the svg element, create a group under it and translate the group when any of the object is dragged. In this question you can find more details about this approach:
这篇关于如何使用D3移动（拖放）多个形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
