D3js : 대신 d3.behaviour.drag (의 체스 조각을 드래그 동작

Question

문제 해결 == 사용 d3.drag()를 설정)와 D3-drag.v1.min.js에게

I을 사용 할 수 없습니다 D3js로 SVG 체스 보드를 설정하고 for 루프를 사용하여 각 행과 각 열을 이동합니다. 나는 각각의 체스 조각이 svg 요소이므로 체스 조각에 유니 코드를 사용했습니다.

D3js의 끌기 동작으로 체스 조각을 드래그하려고하지만 가능하지 않습니다.

모든 체스 조각에는 "드래그 가능"등급이 있습니다. 그래서 드래그를 생성하고 클래스와 모든 요소에

이

var drag = d3.behavior.drag() 
    .origin(function() { 
     var t = d3.select(this); 
     return {x: t.attr("x"), y: t.attr("y")}; 
    }) 
    .on("dragstart", function() { 
     d3.event.sourceEvent.stopPropagation(); // silence other listeners 
    }) 
    .on("drag", function(d,i) { 
     d3.select(this) 
     .attr("x", d3.event.x) 
     .attr("y", d3.event.y); 
    }); 

d3.selectAll(".draggable").call(drag); 

내 전체 코드는 여기 또한, 나는 다른과 SVG 요소와 같은 드래그 기능을 사용하는 것을 시도했다 http://codepen.io/linhnt1516/pen/ZeGoNj?editors=0011

이다 "드래그"를 부착 예. 이 코드 펜 http://codepen.io/linhnt1516/pen/VpvobE?editors=0011을 확인하고 텍스트와 상자를 드래그하십시오.

나는 D3js의 많은 드래그 예제를 살펴 보았지만 그 중 어느 것도 체스 피스 케이스와 함께 작동하지 않습니다.

누구나 상황이 잘못 될 수있는 해결책이나 아이디어가 있습니다.

Answer 1

나는 완전히 D3의 V4와 D3 v3을 드래그 동작 또는 무엇 behaviour.drag()와 실제 문제가 사이의 차이를 이해하지 않은 내가 D3의 V3를 사용

var drag = d3.behaviour.drag() 

을 설정하기 전에

질문에 설명 된대로 작동하지 않습니다.

그러나 나는이 하나를 추가 할 때 그래서 D3-drag.v1.min.js

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script> 

인 지원 D3 스크립트를 발견하고 드래그

var drag = d3.drag() 

자세한 코드를 설정 위와 동일하다. 단지 다른 초기화 구문이다. 이제 드래그 기능이 올바르게 작동합니다. 누구든지 .behaviour.drag()가 작동하지 않는 이유와 내 이전 코드와 새로운 작업 코드 사이의 실제 차이점이 무엇인지 알고 있다면 알려주십시오.