如何使用D3移动（拖放）多个形状

Question

如何使用D3移动（拖放）多个形状

4

我如何使用d3拖放多个形状？

我尝试将一些形状放在一个svg中并移动这个svg-这可以工作，但不够流畅。这是目前为止我得到的

<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>

有任何建议吗？

- Thorsten Niehues

1

你可以尝试固定svg元素的位置，在其下创建一个组，并在拖动任何对象时平移该组。在这个问题中，你可以找到更多关于这种方法的细节：https://dev59.com/72sz5IYBdhLWcg3wmpL0 - Pablo Navarro

正是我所需要的 - 非常感谢。（不幸的是，我没有通过Google或搜索功能找到这篇文章）。如果您将其发布为答案，我将接受此解决方案。 - Thorsten Niehues

我刚把评论发布成了答案。祝你的项目好运。 - Pablo Navarro

2个回答

1

你可以尝试固定svg元素的位置，在其下创建一个组，并在拖动任何对象时将该组进行翻译。在这个问题中，您可以找到更多关于这种方法的细节：

SVG dragging for group

- Pablo Navarro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Davies · Accepted Answer

拖拽行为需要在拖动时更新位置的选择器上调用。在您的代码中，您正在更新父节点的位置，这会导致奇怪的“抖动”，因为拖动位置本身是相对于父节点的。

例如，您可以使用以下代码替换上面的move函数：

function move() {
  d3.select(this)
      .attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
}