rect/image에 드래그를 적용하려면 어떻게해야합니까?

Question

그런 어리석은 질문과 아마도 간단한 대답을 가지고 있지만 내 캔버스 주위에 내 이미지를 드래그 할 수 없습니다.

function simpleButton(origImage, overlay, iconWidth, iconHeight, xpos, ypos, whenClicked, title) 
{ 
    svg.append("svg:image") 
    .datum({ 
     x: xpos, //-starting 'x' position 
     y: ypos //-starting 'y' position 
    }) 
    .attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; }) 

     .attr("xlink:href", origImage) //-original image 
     // .attr("x",xpos) //-starting 'x' position 
     // .attr("y",ypos) //-starting 'y' position 
     .attr("width",iconWidth) //-icon width 
     .attr("height",iconHeight) //-icon height 
     .on("click",whenClicked) //-call when button is clicked 
     .on("mouseover",function(){d3.select(this).attr("xlink:href", overlay);}) //-change image when mouseover 
     .on("mouseout",function(){d3.select(this).attr("xlink:href", origImage);}) //-reset image 
     .call(button_drag) 
     .append("svg:title") 
      .text(title); //-give the button a title   
} 

그리고 내 드래그 기능 : 이미지 중 하나를 드래그 할 때 나는 오류가

var button_drag = d3.behavior.drag() 

    .on("dragstart", function(){ 
     clog("dragstart"); 
    }) 
    .on("drag", function(d,i) { 
      d.x += d3.event.dx 
      d.y += d3.event.dy 
      d3.select(this).attr("transform", function(d,i){ 
       return "translate(" + [ d.x,d.y ] + ")" 
      }) 
     }) 
    .on("dragend", function(){ 
     clog("dragend"); 
    }); 

:

Uncaught TypeError: Cannot read property 'x' of undefined 

내가 시도 여기에 내 이미지에 대한 내 코드입니다 그것을 연구하고 분명히 데이터를 내 사각형에 적용 할 필요가 없습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

드래그 d을 통과을 가정 입니다 - 요소가 드래그되는 결합 데이텀 - 당신의 핸들러 함수 .on("drag", function(d,i) { ... }에.

d은 정의되지 않았습니다. 따라서 d.x 설정은 속성 'x'을 읽을 수 없다고 불만을 토로합니다. d이 정의되지 않은 이유는 이미지에 데이텀이 바인딩되어 있지 않기 때문입니다. - 오히려 당신이처럼 svg.append을 보내고보다 요소 오링 enter() '를 추가 한 후 결합하고 D3 선택의 .data() 방법을 사용하여

1. : 요소에 바인딩됩니다 방법 데이터 중 하나입니다. 또는
2. # 1을 수행하고 싶지 않은 경우 .datum() 메서드를 사용하여 만든 요소에 데이터를 명시 적으로 바인딩해야합니다.

2 개 중 하나를 수행하면 d이되어야 할 질문이 제기됩니다. 음 ... 드래그 처리기가 해당 소품을 수정하려고하므로 속성이 x 및 y 인 객체 여야합니다.

x 및 y은 초기에 xpos 및 으로 초기화되어야합니다. x 및 y이 데이텀의 일부인 경우 xpos, ypos으로 하드 코딩하지 말고 이미지의 x 및 y 위치를 설정하도록 전환해야합니다. 당신이 옵션 # 2를 포착하면 모두 함께 퍼팅

는

, 다음은 다음과 같습니다

svg.append("svg:image") 
    .datum({ 
     x: xpos, //-starting 'x' position 
     y: ypos //-starting 'y' position 
    }) 
    .attr("xlink:href", origImage) //-original image 
    .attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; }) 
    .attr("width",iconWidth) //-icon width 
    .attr("height",iconHeight) //-icon height  
    .call(button_drag)