svg 요소에서 d3-drag를 사용하여 이벤트가 쉽게 드래그되지 않음

Question

drawAll은 2 차원 배열입니다. drawAll[i]은 그 도면의 모든 획을 포함하는 요소/도면입니다. 문자열로 표시된 획은 <path>을 만드는 데 사용할 수있는 일련의 2D 점입니다.

각 .element을 #canvas svg의 다른 곳으로 드래그 할 수 있도록하려고합니다. this answer을 따라 왔지만 요소가 쉽게 끌리지 않습니다. 드래그 이벤트가 시작되기 전에 여러 번 드래그해야합니다. 무엇이 잘못되었거나 요소를 쉽게 끌 수 있는지 나는 잘 모르겠습니다. 미리 감사드립니다. :) (소자 당 하나의 스트로크를 포함하는) 두 요소

drawAll 예 :

var drawAll = [["M6,239 C6,239 46,149 88,67 127,6 135,0 140,19 143,74 151,129 158,156 185,221 184,243 166,251 127,255 52,252 0,246"],["M113,15 C113,15 45,95 28,114 23,115 0,148 48,166 114,184 255,184 208,125 178,75 147,12 122,0"]]; 

HTML :

<div id="wrapper"> 
     <svg id="canvas" preserveAspectRatio="none" height="400" width="400" viewbox="0 0 2000 2000"></svg> 
    </div> 

JS :

function getData(){ 
    return new Promise(function(resolve, reject){ 
     var data; 
     $.getJSON(Flask.url_for("data")) 
     .done(function(json){ 
      data = json; 

      var drawAll = []; 
      var i, j; 
      var temp1 = data; 
      for (i in temp1){ 
       var temp2 = temp1[i]; 
       var drawOne = []; 
       for (j in temp2){ 
        var temp3 = temp2[j][0]; 
        var temp4 = temp2[j][1]; 
        var points = ""; 
        for (k in temp3){ 
         if(k == 0) 
         { 
          points = points + "M" + temp3[k] + ","; 
          points = points + temp4[k] + " "; 
          points = points + "C" + temp3[k] + ","; 
          points = points + temp4[k] + " "; 
         } 
         else 
         { 
          points = points + temp3[k] + ","; 
          points = points + temp4[k] + " "; 
         } 
        } 
        drawOne.push(points); 
       } 
       drawAll.push(drawOne); 
      } 
      resolve(drawAll); 
      reject("Error in fetching JSON"); 
     }); 
    }); 
} 

function draw(drawAll){ 
    var width = 2000; 
    var spacing = 300; 
    var x = -spacing; 
    var temp = -spacing; 
    var y = 0; 
    var id = 0; 

    var elements = d3.select("#canvas"); 
    var element = elements.selectAll("svg.element") 
     .data(drawAll) 
     .enter() 
     .append("svg") 
      .attr("class", "element") 
      .attr("id", function(){ 
       return id++; 
      }) 
      .attr("x", function(){ 
       if(x + spacing > width) 
        x = -spacing; 
       x = x + spacing; 
       return x; 
      }) 
      .attr("y", function(){ 
       if(temp + spacing > width) 
       { 
        temp = -spacing; 
        y = y + spacing; 
       } 
       temp = temp + spacing; 
       return y; 
      }) 
      .call(d3.drag() 
       .on("start", function(d){ 
        d3.select(this).raise(); 
       }) 
       .on("drag", function(d){ 
        d3.select(this) 
         .attr("x", d.x = d3.event.x) 
         .attr("y", d.y = d3.event.y); 
       }) 
       .on("end", function(d){ 

       })); 
    element.selectAll("path .stroke") 
     .data(function(d){ 
      return d; 
     }) 
     .enter() 
     .append("path") 
     .attr("class", "stroke") 
     .attr("d", function(d){ 
      return d; 
     }) 
     .attr("style", "fill: none; stroke: black; stroke-width: 2;"); 

    return new Promise(function(resolve, reject){ 
     resolve(drawAll); 
     reject("Error in drawing JSON"); 
    }); 
} 

function runner(){ 
    return getData() 
     .then(draw) 
     .catch(function(msg){ 
      console.log(msg); 
     }); 
} 

runner().catch(function(msg){ 
     console.log(msg); 
    }); 

Answer 1

는를 살펴 보자 pointer-events 프리젠 테이션 속성을 사용하여 이벤트를 발생시킬 수있는 부분을 조정할 수 있습니다.

좁은 스트로크를 칠, 당신은 또한 이벤트를 잡으려고 만이 넓은 투명 라인을 결합 할 수 있습니다 :

var group = element.selectAll("g .stroke") 
    .data(function(d){ 
     return d; 
    }) 
    .enter() 
    .append("g") 
    .attr("style", "fill: none; stroke: black") 
    .attr("class", "stroke"); 

group.append("path") 
    .attr("d", function(d){ 
     return d; 
    }) 
    .attr("style", "stroke-width: 10; stroke-linecap: round; opacity: 0"); 

group.append("path") 
    .attr("d", function(d){ 
     return d; 
    }) 
    .attr("style", "stroke-width: 2;");