未定義のプロパティ 'ドラッグ'を読み取ることができませんD3

Question

私はD3で初心者です。マウスでドラッグしようとしていますが、実際にはいくつかの問題が発生します。このエラーを取得し、それを呼び出すようにする前に、私はVaRのドラッグを定義する場合

：私はそれを呼び出した後のvarドラッグを定義する場合、未定義

のプロパティ「ドラッグ」を読み取ることができません、私は別のエラーを取得：プロパティを読み取ることができません。「適用」 undefinedの しかし、実際には、stackoverflowで私はこのproblを解決するために私はそれを呼び出す前にvarドラッグを定義する必要があり、私はループ上で検索することをお読みください。

以下、私のコードを見ることができます。前もって感謝します。

$(document).ready(function() { 
var width = 500; 
var height = 500; 
var fullAngle = 2 * Math.PI; 
var arc2 = d3.arc() 
      .innerRadius(195) 
      .outerRadius(200) 
      .startAngle(0.18) 
      .endAngle(fullAngle/1.02); 

var svgContainer = d3.select("#container") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .style("border", "1px solid"); 

var group1 = svgContainer.append("g"); 
var group2 = svgContainer.append("g"); 
group2.append("path") 
    .attr("d", arc2()) 
    .attr("fill", "blue") 

group1.attr("transform", "translate(" + 200 + "," + 200 + ")"); 
group2.attr("transform", "translate(" + 250 + "," + 250 + ")"); 

var rectangle = svgContainer.append("rect") 
      .attr("x", 150) 
      .attr("y", 50) 
      .attr("width", 30) 
      .attr('class', 'rectangle') 
      .attr("height", 70) 
      .call(drag) 

    var drag = d3.behavior.drag().on('drag', function() { 
     var obj = svgContainer.append("rect") 
     dragMove(this, obj, 'rect') 
    }); 
}); 



    function setPoints(obj, prop) { 
     obj[prop] = [] 
     var k = 0 
     d3.selectAll('.rect') 
      .each(function() { 
       var c = d3.select(this) 
       var cX = d3.transform(c.attr('transform')).translate[0] 
       var cY = d3.transform(c.attr('transform')).translate[1] 
       obj[prop].push({ 
        x: cX, 
        y: cY, 
        index: k++ 
       }) 
      }) 
    } 

     function dragMove(rectangle, obj, prop) { 
      var x = d3.event.x 
      var y = d3.event.y 
      setPoints(obj, prop) 
      d3.select(rectangle).attr('transform', 'translate(' + x + ',' + y + ')') 
      $scope.$apply() 
     } 

Answer 1

コードでd3 v4を使用しています。

d3.behavior.drag()

は、参照してください続けますdragMove機能を実装し、使用

var drag = d3.drag().on("drag", function() { 
     d3.event.sourceEvent.stopPropagation(); // silence other listeners 
      dragMove(this, obj, 'points') 
    }) 

前に、このようにする必要がありますが機能d3.dragに変更して宣言されている。このFIDDLE

Answer 2

あなたはD3 v4を使用していますが、他の多くのものと同様に、ドラッグ動作の名前が変更されました。 changelog：

The drag behavior d3.behavior.drag has been renamed to d3.drag.

この名前を変更するには、コードを調整する必要があります。

var drag = d3.drag().on('drag', function() { 
    dragMove(this, obj, 'points') 
}); 

実装も変更されているため、実際に動作させるためには他の変更が必要な場合があります。しかしこれはあなたが提供したコードからは分かりませんが、別の質問に値する価値があります。