d3.jsのsvgにある四角形のグループをドラッグアンドドロップする方法は？

私はthisドラッグアンドドロップの例に基づいて作業しました：d3.jsのsvgにある四角形のグループをドラッグアンドドロップする方法は？

私はグループをドラッグしたいです。私は単一のグループに両方の長方形を配置し、今すぐドラッグし、グループ全体をドロップしたい、私のコードドラッグアンドドロップでは、単一の長方形ではなく、グループで動作します。

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

出典

2017-03-25 V.Kumpavat

あなたはグループの要素に対して変換の代わりにXを設定する使用する必要があり、yは属性。 –

SVG group elementsにはxまたはyプロパティがありません：

、ここでは私のコードです。それらを配置するには、あなたがtransformを使用する必要があります。そのほかに

d3.select(this).attr("transform", "translate(" + x + "," + y + ")") 
//the x and y positions here --------------------^ -------^

を、<g>要素が唯一のコンテナです。次のデモでは（既に説明したように、グループを配置するにはtransformを使用します）、矩形の1つをクリックしてグループ全体をドラッグする必要があります。その間のスペースをクリックしても効果はありません。

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>

出典

2017-03-26 13:00:44

それは働いています...私を助けるために非常にジェラルドをありがとう –

d3.jsのsvgにある四角形のグループをドラッグアンドドロップする方法は？

答えて

関連する問題