Javascript svg d3js.drag（…）。origin不是函数

我收到此错误：

*Uncaught TypeError: d3__WEBPACK_IMPORTED_MODULE_4__.drag(...).origin is not a function*

  113 |   .data(targetPoints)
  114 | .enter().append("circle")
  115 |   .attr("class", "handle")
> 116 |   .attr("transform", function(d) { return "translate(" + d + ")"; })
      | ^  117 |   .attr("r", 7)
  118 |   .call(d3.drag()
  119 |     .origin(function() {

我正在尝试制作一个React应用程序，在那里我可以上传一张图片，然后可以使用SVG拖动和透视变换。我是根据这个代码构建的

。。。
const DoorPreviewer=（{doorHook}）=>{
const{background}=doorHook；
useffect（（）=>{
var margin={顶部：50，右侧：280，底部：50，左侧：280}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var transform=[“”、“-webkit-”、“-moz-”、“-ms-”、“-o-”]。减少(
函数（p，v）{返回document.body.style中的v+“transform”？v:p；}
)+“变换”；
var sourcePoints=[[0,0]，[width，0]，[width，height]，[0，height]，
targetPoints=[[0,0]，[width，0]，[width，height]，[0，height]；
d3.选择（“主体”）.选择全部（“svg”）
.数据（[“变换”、“展开”]）
.enter（）.append（“svg”）
.attr（“id”，函数（d）{return d；}）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var svgTransform=d3.选择（“转换”）
.样式（变换+“-原点”，margin.left+“px”+margin.top+“px 0”）；
var svgFlat=d3。选择（“平坦”）；
svgTransform.select（“g”）.append（“image”）
.attr（“xlink:href”，“sailboat.png”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
svgTransform.select（“g”）.selectAll（“行--x”）
.数据（d3.范围（0，宽度+1，40））
.enter（）.append（“行”）
.attr（“类”、“行--x”）
.attr（“x1”，函数（d）{返回d；}）
.attr（“x2”，函数（d）{返回d；}）
.attr（“y1”，0）
.attr（“y2”，高度）；
svgTransform.select（“g”）.selectAll（“行--y”）
.数据（d3.范围（0，高度+1，40））
.enter（）.append（“行”）
.attr（“类”、“行--y”）
.attr（“x1”，0）
.attr（“x2”，宽度）
.attr（“y1”，函数（d）{return d；}）
.attr（“y2”，函数（d）{返回d；}）；
变量句柄=svgFlat.select（“g”）.selectAll（“句柄”）
.数据（目标点）
.enter（）.append（“圆”）
.attr（“类”、“句柄”）
.attr（“transform”，函数（d）{return“translate”（+d+）”）；}）
.attr（“r”，7）
.call（d3.drag（）
.origin（函数（）{
变量d=d3。选择（此）
返回{x:d[0]，y:d[1]}；}）
.打开（“拖动”，拖动））；
函数拖动（evt，d）{
d3.选择（this.attr）（“transform”，“translate”（+（d[0]=evt.x）+），“+（d[1]=evt.y）+”）；
转化（）；
}
函数转换（）{
对于（变量a=[]，b=[]，i=0，n=sourcePoints.length；i

---

有人知道为什么会发生这种情况吗？

d3v3之后，drag.origin方法已被drag.subject替换。d3v3之后，drag.origin方法已被drag.subject替换。

...
const DoorPreviewer = ({doorHook}) => {
  const {background} = doorHook;
  
  useEffect(() => {
    var margin = {top: 50, right: 280, bottom: 50, left: 280},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var transform = ["", "-webkit-", "-moz-", "-ms-", "-o-"].reduce(
      function(p, v) { return v + "transform" in document.body.style ? v : p; }
      ) + "transform";

    var sourcePoints = [[0, 0], [width, 0], [width, height], [0, height]],
        targetPoints = [[0, 0], [width, 0], [width, height], [0, height]];

    d3.select("body").selectAll("svg")
        .data(["transform", "flat"])
      .enter().append("svg")
        .attr("id", function(d) { return d; })
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var svgTransform = d3.select("#transform")
        .style(transform + "-origin", margin.left + "px " + margin.top + "px 0");

    var svgFlat = d3.select("#flat");

    svgTransform.select("g").append("image")
        .attr("xlink:href", "sailboat.png")
        .attr("width", width)
        .attr("height", height);

    svgTransform.select("g").selectAll(".line--x")
        .data(d3.range(0, width + 1, 40))
      .enter().append("line")
        .attr("class", "line line--x")
        .attr("x1", function(d) { return d; })
        .attr("x2", function(d) { return d; })
        .attr("y1", 0)
        .attr("y2", height);

    svgTransform.select("g").selectAll(".line--y")
        .data(d3.range(0, height + 1, 40))
      .enter().append("line")
        .attr("class", "line line--y")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", function(d) { return d; })
        .attr("y2", function(d) { return d; });

    var handle = svgFlat.select("g").selectAll(".handle")
        .data(targetPoints)
      .enter().append("circle")
        .attr("class", "handle")
        .attr("transform", function(d) { return "translate(" + d + ")"; })
        .attr("r", 7)
        .call(d3.drag()
          .origin(function() {
            var d = d3.select(this)
            return {x: d[0], y: d[1]}; })
          .on("drag", dragged));

    function dragged(evt, d) {
      d3.select(this).attr("transform", "translate(" + (d[0] = evt.x) + "," + (d[1] = evt.y) + ")");
      transformed();
    }

    function transformed() {
      for (var a = [], b = [], i = 0, n = sourcePoints.length; i < n; ++i) {
        var s = sourcePoints[i], t = targetPoints[i];
        a.push([s[0], s[1], 1, 0, 0, 0, -s[0] * t[0], -s[1] * t[0]]);
        b.push(t[0]);
        a.push([0, 0, 0, s[0], s[1], 1, -s[0] * t[1], -s[1] * t[1]]);
        b.push(t[1]);
      }

      var X = solve(a, b, true), matrix = [
        X[0], X[3], 0, X[6],
        X[1], X[4], 0, X[7],
          0,    0, 1,    0,
        X[2], X[5], 0,    1
      ].map(function(x) {
        return d3.format(x)(6);
      });

      svgTransform.style(transform, "matrix3d(" + matrix + ")");
    }
  }, [])

  return (
    <DoorPreviewBackground bg={background}>
      
    </DoorPreviewBackground>
  );
}

export {Display};