d3에서 동적 DOM 요소 선택

Question

도형 그리기 및 D3을 사용하여 도형을 선택하고 상호 작용하려고합니다. 나는 D3를 배우므로 좀 더 명확하게 이해해야합니다. 도형을 그리는 동안 도형을 드래그해야합니다. 캔버스에 여러 객체가 그려져있는 경우 특정 객체를 선택할 수 없습니다.

http://jsfiddle.net/nilarya/WKa8F/2/ 이것은 내가 지금까지 해왔 던 곳입니다. (코드가 다소 엉망입니다. 죄송합니다. 늦은 시간에 ... :(여러 개 그리면) 객체 (원 및/또는 직사각형) 다음 캔버스에 당신이 오류를 통지, 하나를 선택하려고합니다.

을 내가

d3.select(this) 

또한

d3.select(this.firstChild) 

하지만 사용하여 시도했다 필요하다 특정 원이나 직사각형을 선택하십시오. 어떻게해야합니까?

Answer 1

청취자가 선택한 모양 (즉,이 수신기가 바인드 된 모양) 만 처리하도록 수신기를 업데이트하십시오. 당신이해야 할 것이다 모든 변수에 D3에 의해 this의 선택을 할당하고, 대신 외부 참조의,과 같이 사용 : 그러나

function dragmove(d) { 
    var shape = d3.select(this); 
    if (isrectMov == true) { 
     shape.attr("x", d3.event.x) 
      .attr("y", d3.event.y) 
      .attr("cursor", "move"); 
    } else if (islineMov == true) { 
     shape.attr("x1", d3.event.x) 
      .attr("y1", d3.event.y) 
      .attr("x2", d3.event.x) 
      .attr("y2", d3.event.y) 
      .attr("cursor", "move"); 
    } else if (iscircleMov == true) { 
     shape.attr("cx", d3.event.x) 
      .attr("cy", d3.event.y) 
      .attr("cursor", "move"); 
    } else {} 
} 

, 이것은 단지 비슷한 모양을 위해 일 것이라고 코드에는 해결해야 할 문제가 더 있습니다. 처음부터 다시 시작하고 전역 변수를 사용하지 말고 필요에 따라 (예 : 핸들러 내부에서) 모양이 필요합니다 (또는 선택). 이렇게하면 더 이상 마음 속의 각 변수의 상태를 따르지 않아도되므로 복잡성이 줄어 듭니다. 나는 2 원과 하나 개의 사각형을 그린 경우

---

Demo