Uncaught Error: unknown type: dragend in d3.js v5.4.0

Question

我正在使用 d3.js v5.4.0。

这是我收到的错误：Uncaught Error: unknown type: dragend。

这是因为我正在尝试执行以下操作：

            d3.drag()
            .subject(function(d){
                return {x: d.x, y: d.y};
            })
            .on("drag", function(args){
                thisGraph.state.justDragged = true;
                thisGraph.dragmove.call(thisGraph, args);
            })
            .on("dragend", function() {
                // todo check if edge-mode is selected
            });

并且 dragend 现在似乎已被弃用。

我试图在 here 的较新版本中找到描述替代方案的发行说明，但无法做到这一点。

请帮我解决这个问题。

Answer 1

目前您可以通过拖动监听的三个事件是（v4 和 5。v3 和之前的版本不同）：

start - after a new pointer becomes active (on mousedown or touchstart). drag - after an active pointer moves (on mousemove or touchmove). end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). (docs)

因此，您只需要将 dragend 更改为 end

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",300);
  
var circle = svg.append("circle")
  .attr("cx",100)
  .attr("cy",100)
  .attr("r",20)
  .attr("fill","steelblue")
  .call(d3.drag().on("start", function() {
      d3.select(this).attr("fill", "orange")
    })
    .on("drag", function() {
      d3.select(this).attr("cx",d3.event.x)
        .attr("cy", d3.event.y )
    })
    .on("end", function() {
      d3.select(this).attr("fill","steelblue");
    })
  )

<script src="https://d3js.org/d3.v5.js"></script>

Uncaught Error: unknown type: dragend in d3.js v5.4.0

Uncaught Error: unknown type: dragend in d3.js v5.4.0

release

d3.js

release-notes