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을 사용합니다.) 예를 들어, 사각형 중 하나를 클릭하여 전체 그룹을 드래그해야합니다. 두 그룹 사이의 공간을 클릭해도 아무런 효과가 없습니다.

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에있는 사각형 그룹을 끌어서 놓는 방법은 무엇입니까?

답변

관련 문제