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>

助言がありますか？

4

2 に答える 2

5

ドラッグ動作は、ドラッグ中に位置を更新する選択で呼び出す必要があります。あなたのコードでは、ドラッグ位置自体が親ノードに相対的であるため、親ノードの位置を更新しています。これにより、奇妙な「ジッター」が発生します。

たとえば、move上記の関数を次のように置き換えることができます。

function move() {
  d3.select(this)
      .attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
}
于 2013-06-04T16:27:48.367 に答える
1

svg 要素の位置を修正し、その下にグループを作成して、オブジェクトのいずれかがドラッグされたときにグループを翻訳することができます。この質問では、このアプローチの詳細を確認できます。

グループの SVG ドラッグ

于 2013-06-05T12:16:50.233 に答える