svg要素のd3-dragを使用してイベントを簡単にドラッグできない

Question

drawAllは2次元配列です。drawAll[i]はその図のすべてのストロークを含む要素/図です。文字列で表されるストロークは、<path>の作成に使用できる一連の2Dポイントです。

.elementを#canvas svgのどこにでもドラッグできるようにしようとしています。私はthis answerに従っていますが、私の要素は簡単にドラッグできません---ドラッグイベントが発生する前に、複数回ドラッグする必要があります。私は何がうまくいかないのか、どのように要素を簡単にドラッグできるのかは分かりません。前もって感謝します。 :)（要素ごとに1つのだけのストロークを含む）2つの要素を持つ

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;");