tgdwyer / WebCola

Javascript constraint-based graph layout
http://marvl.infotech.monash.edu/webcola/
MIT License
2.01k stars 257 forks source link

cola.drag() throws errors with d3v7 #326

Open l0drex opened 2 years ago

l0drex commented 2 years ago

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 commented 2 years ago

Did you find a solution for this?

l0drex commented 2 years ago

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

ViggoV commented 2 years ago

Thanks. I'll look into it :)

JustyrTsaiLar commented 1 year ago

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 commented 1 year ago

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