Я просто возился с кодом, который нашел в различных примерах в Интернете. Пока все работает хорошо, за исключением того, что я не могу запустить событие окончания перетаскивания. На данный момент я просто пытаюсь напечатать «конец» на консоли, но ничего не работает.
const drag_handler = d3
.drag()
.on("start", drag_start)
.on("drag", drag_drag)
.on("end", drag_end);
function drag_start(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
event.on("end", console.info("start"));
}
function drag_drag(event, d) {
d.fx = event.x;
d.fy = event.y;
event.on("end", console.info("drag"));
}
function drag_end(event, d) {
event.on("end", console.info("end"));
event.on("start", console.info("end"));
console.info("end");
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
drag_handler(d3.select("circle"));
Вот ручка с полным кодом
🤔 А знаете ли вы, что...
JavaScript используется для разработки современных одностраничных приложений (SPA), где весь контент загружается асинхронно.
В настоящее время у вас есть три функции перетаскивания (я удалил все, кроме ведения журнала):
function drag_start(event, d) {
event.on("end", console.info("start"));
}
function drag_drag(event, d) {
event.on("end", console.info("drag"));
}
function drag_end(event, d) {
event.on("end", console.info("end"));
event.on("start", console.info("end"));
console.info("end");
}
Если вы просто хотите зарегистрировать начало/конец/перетаскивание, вы должны использовать:
function drag_start(event, d) {
console.info("start");
}
function drag_drag(event, d) {
console.info("drag");
}
function drag_end(event, d) {
console.info("end");
}
Событие.на
Используя event.on(), вы добавляете новый временный прослушиватель событий к конечному событию:
Изменения в зарегистрированных слушателях посредством перетаскивания во время жеста перетаскивания не влияют на текущий жест перетаскивания. Вместо этого вы должны использовать event.on, который также позволяет вам регистрировать временные прослушиватели событий для текущего жеста перетаскивания. (документы)
Это перезаписывает исходное конечное событие, потому что у вас может быть только один слушатель для каждого из start/end/drag, если вы не назовете слушателей.
Вообще говоря, есть ограниченные случаи, когда вы хотели бы использовать event.on - неясно, почему вам это нужно здесь.
Передача функции в .on()
При использовании event.on вы на самом деле не передаете ему какую-либо функцию, вы передаете возвращаемое значение console.info("string"), которое не определено. Например, чтобы получить функцию прослушивания событий, вы можете использовать:
console.info(event.on("end"));
Если вы добавите это в свою функцию перетаскивания, вы увидите, что она возвращает undefined.
В конечном итоге вы выполняете console.info(), которое регистрирует значение, а затем назначаете undefined в качестве функции прослушивателя событий. Поскольку вы ничем не заменили исходную функцию прослушивания событий, когда происходит событие окончания перетаскивания, ничего не происходит.
Если вы действительно хотите просто записать что-то здесь, вы можете использовать:
event.on("end", function() {
console.info("end")
});
Здесь мы передаем функцию в .on() вместо undefined. Смотрите также здесь.
Однако неясно, зачем вам нужно использовать event.on(), если вы изначально просто установили событие окончания перетаскивания для использования
function drag_end() {
console.info("end");
})
Как и в простом решении выше.