D3.js의 라이브 드로잉

Question

저는 D3.js로 시작 했으므로 그림을 그려서 선을 그리는 것과 같은 것을 만들고 싶습니다. 단계는 동일해야합니다 : - 화면상의 한 점을 클릭하십시오. - 목적지까지 드래그하여 선을 만듭니다.

지금 문제가되는 것은 마우스를 대상으로 끌면 마우스가 마우스에 따라 움직여야한다는 것입니다. 어떻게해야합니까?

감사합니다.

Answer 1

다음은 간단한 예입니다. 또한 live version을 참조하십시오.

var line; 

var vis = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 400) 
    .on("mousedown", mousedown) 
    .on("mouseup", mouseup); 

function mousedown() { 
    var m = d3.mouse(this); 
    line = vis.append("line") 
     .attr("x1", m[0]) 
     .attr("y1", m[1]) 
     .attr("x2", m[0]) 
     .attr("y2", m[1]); 

    vis.on("mousemove", mousemove); 
} 

function mousemove() { 
    var m = d3.mouse(this); 
    line.attr("x2", m[0]) 
     .attr("y2", m[1]); 
} 

function mouseup() { 
    vis.on("mousemove", null); 
} 

난 당신이 찾고있는 부분은 우리가 현재 행을 선택하고 현재 마우스 위치에 따라 대상 지점의 조정 mousemove 이벤트 처리기에서 생각합니다. 불필요한 처리를 피하기 위해 mousedown에만 mousemove을 사용 가능하게 설정합니다.