2017-11-22 4 views
0

나는 (나에게 보이는 것) 무언가를하려하고있다. 즉, 은 간단해야하지만 내 시도는 매우 복잡해지고 d3 안내를 찾고있다.끌기 그룹을 d3으로 특정 좌표에 "등록"하는 방법은 무엇입니까?

드래그 한 끝에 놓인 드래그 그룹 객체 (사각형으로 구성되고 텍스트)가 있다고 가정합니다. 이 특정 좌표에이 그룹을 "등록"하고 싶습니다. 어떻게해야합니까?

d3.drag의 on("end") 이벤트와 관련된 dragended() 함수에 코드를 추가하고 있습니다.

function dragended(d) { 
    var move = d3.select(this); 
    var g = move._groups[0][0]; // same as this! 
    var rect = g.children[0] 
    rect.x = schedLeft; 
    rect.y = schedTop; 

    d3.select(this).classed("active", false); 
} 

변수 i에 move d3.select(this) 결합 및 목적은 첨부 도면 (크롬 현상 로컬)에 도시 된 것과 같은 을 얻는다.

enter image description here

EDIT : move._groups[0][0] 바보이고; this과 같습니다.

내가 이동하려는 것을 내가 (아이 recttext 노드) 그룹을 얻을 수 this 사용.

schedLeft은 그룹 삭제를 원하는 x 좌표입니다. rect 노드에는 xy 속성이 있지만 내 rect.x = schedLeft 은 변경되지 않습니다 (디버거에서 보임).

전체 그룹 (즉, 참석자 인 text 포함)을 새 위치로 전환하는 것이 올바른 방법일까요? 힌트에

+0

첫째,'d3.select (이) ._ 그룹을 [0] [0]'이다 단지 '이'와 동일합니다. 둘째 :'schedLef'는 무엇입니까? 여기서 정확히 무엇을하고 싶니? –

+0

@GerardoFurtado, 네, 사실입니다. # 2 :'schedLeft'는 그룹을 드롭하고자하는 장소의 x 좌표입니다. – rikb

답변

0

덕분에 나는 SO here (2013!)에 발견 나는 그것을 사용하여이 작업을 가지고 :

function dragended(d) { 
    // register dragged move into hourSched 
    var top = schedTop + (nsched++) * menuWOHgt; 
    var transX = newDropX - d.x ; 
    var transY = newDropY - d.y; 
    var tstr = `translate(${transX}, ${transY})`; 
    d3.select(this).attr("transform", tstr) 
        .classed("active", false); 
} 
관련 문제