cola.drag() throws errors with d3v7

[l0drex]

selection.call(cola.drag) throws a bunch of errors when using the latest d3 version, d3v7. When using cola.js (not the min version), the output is as follows:

Uncaught TypeError: position is undefined
    drag layout.js:532
    drag d3v4adaptor.js:31
    call d3.v7.js:1431
    gesture d3.v7.js:2665
    mousemoved d3.v7.js:2588
    contextListener d3.v7.js:2215
    onAdd d3.v7.js:2254
    selection_each d3.v7.js:1889
    selection_on d3.v7.js:2277
    mousedowned d3.v7.js:2572
    contextListener d3.v7.js:2215
    onAdd d3.v7.js:2254
    selection_each d3.v7.js:1889
    selection_on d3.v7.js:2277
    drag d3.v7.js:2558
    selection_call d3.v7.js:1855
    drag d3v4adaptor.js:38
    selection_call d3.v7.js:1855

Since d3v7 seems to use an adaptor to d3v4, I checked if it works using d3v4 directly, and it does work there.

[ViggoV]

Did you find a solution for this?

[l0drex]

No, I'm not using the drag function anymore. You could try to write your own adaptor like this one

[ViggoV]

Thanks. I'll look into it :)

[JustyrTsaiLar]

v7 same problem .

how to make my own adaotor ? still no drag moving and no error console .
is drag from d3.drag or cola.drag ?
and event name using like start.adptor or start ?

thanks

[ViggoV]

v7 same problem .

how to make my own adaotor ? still no drag moving and no error console . is drag from d3.drag or cola.drag ? and event name using like start.adptor or start ?

thanks

I ended up copying the d3v4 adapter linked above and simplifying it a bit. Turned out I could avoid using the internal imports (at least for my use case) with a few tweaks, and by converting it to JS so the TypeScript time were redundant.

Here is a Gist

[cbbeau]

This was really helpful! To make this work in my case, I also needed to modify the calls to dragStart, dragOrigin, and dragEnd, not just drag. Example for dragStart:

.on('start.d3adaptor', Layout.dragStart)

to

.on("start.d3adaptor", (e, d)=>{ Layout.dragStart(d); })

because the dragStart function expects only d (the node or group) but was receiving the event instead.