3

我正在使用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现在似乎已被弃用。

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

请帮我解决这个问题。

4

1 回答 1

4

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

start - 在新指针变为活动状态后（在 mousedown 或 touchstart 上）。拖动 - 在活动指针移动后（在 mousemove 或 touchmove 上）。end - 在活动指针变为非活动状态后（在 mouseup、touchend 或 touchcancel 上）。（文档）

因此，您只需要将 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>

于 2018-05-27T16:14:51.717 回答