d3.js 선택 후 마우스 끌기

Question

저는 아직 d3.js에 익숙하지 않으며 마우스 끌기 이벤트를 처리하는 데 문제가 있습니다. 드래그 할 수있는 원이있는 x-y 플롯을 만들기 위해 프레임 워크를 설정했습니다. 드래그하면 서클을 움직일 수 있지만 한 번 끌기 만하면 실수로 나머지 창을 선택합니다. 마음 속에있는 것은 아닙니다.

나는 jsfiddle의 코드를 넣어하려고했으나 마우스 상호 작용은 전혀이 작동하지 않습니다, 나는 '아직

var canvasWidth = 700, canvasHeight = 700; 
var margin = 20; 
var innerwidth = canvasWidth - margin*2; 
var innerheight = canvasHeight - margin*2; 
var xScale = d3.scale.linear().domain([-10,10]).range([0+margin,canvasWidth-margin]); 
var yScale = d3.scale.linear().domain([10,-10]).range([0+margin,canvasHeight-margin]); 
var xAxis = d3.svg.axis().tickSize(1, 0, 0).scale(xScale).orient("bottom"); 
var yAxis = d3.svg.axis().tickSize(1, 0, 0).scale(yScale).orient("left"); 
var impos = [xScale(5), yScale(5)]; 
var mousedownFlag=0 

var dataArray = [-3, 0, 3]; 

var canvas = d3.select("body") 
    .append("svg").attr("width",canvasWidth).attr("height",canvasHeight); 

canvas.append("g") 
    .append("svg:image").attr("width","660").attr("height","660") 
    .attr("x", xScale(-10)).attr("y", yScale(10)); 

canvas.append("g").call(xAxis).attr("transform","translate(0,680)"); 
canvas.append("g").call(yAxis).attr("transform","translate(20,0)");  

function mouseDrag(d) { 
    var x = d3.event.x, 
     y = d3.event.y; 
    if(x>0 && y>0) 
     d3.select("circle").attr("cx", x).attr("cy", y); 
} 

function mouseClick(d) { 
    var x = d3.event.x, 
     y = d3.event.y; 
    d3.select("circle").attr("cx", x).attr("cy", y); 
} 

// draggable circle 
var circle = canvas.append("circle") 
    .attr("cx", 30) 
    .attr("cy", 30) 
    .attr("r", 20) 
    .on("click", mouseClick) 
    .on("drag", mouseDrag); 

: 여기

http://jsfiddle.net/noiseinthestreet/jjk9ts10/1/

코드입니다 그 바이올린이 충분히 가까워서 그들이 실제로 무엇을하고 있는지 (즉, 내가 아는) 누군가가 내가 필요한 것을 빨리 지적 할 수있을 것입니다.

Answer 1

파블로 나 바로 (Pablo Navarro)의 제안에 감사 드리며 d3.behavior.drag()를 몇 분 동안 사용하여 작동 시켰습니다. 감사! 여기에 내가 변경 한 관련 코드 섹션은 다음과 같습니다

var drag = d3.behavior.drag() 
    .on("drag",function(){d3.select("circle").attr("cx",d3.event.x).attr("cy",d3.event.y);}); 

... 

// draggable circle 
var circle = canvas.append("circle") 
    .attr("cx", 30) 
    .attr("cy", 30) 
    .attr("r", 20) 
    .call(drag);