How To Move (Drag and Drop) multiple Shapes with D3

妖精的绣舞 提交于 2020-01-01 16:58:52

问题


How do I move (drag and drop) multiple shapes with d3.

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>

Any suggestions?


回答1:


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:

SVG dragging for group




回答2:


The drag behaviour needs to be called on the selection whose position you're updating during the drag. In your code, you are updating the position of the parent node, which causes strange "jittering", because the drag position is itself relative to the parent node.

For example, you could replace your move function above with:

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


来源:https://stackoverflow.com/questions/16921777/how-to-move-drag-and-drop-multiple-shapes-with-d3

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!