Uncaught Ошибка: неизвестный тип: dragend в 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 кажется устаревшим.

Я попытался найти примечания к выпуску, которые описывают альтернативу этому в более новых версиях по сравнению с здесь , ноне смог этого сделать.

Пожалуйста, помогите мне решить проблему.

Answer 1

Три события, которые вы можете прослушивать с помощью перетаскивания, в настоящее время (v4 и 5. v3 и предыдущие версии были разными):

start - после того, как новый указатель станет активным (при mousedown или touchstart)).перетащить - после перемещения активного указателя (при перемещении мыши или касании).конец - после того, как активный указатель становится неактивным (при наведении курсора, касании или касании).( документы )

Итак, вам просто нужно изменить драгенд до конца

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>