search

dagrejs / dagre-d3

A D3-based renderer for Dagre
MIT License
2.84k stars 587 forks source link

Render causes enter only transitions #321

Open schloerke opened 6 years ago

schloerke commented 6 years ago

Current, bad transitions: https://dagrejs.github.io/project/dagre-d3/latest/demo/interactive-demo.html

Add a white line in the text to trigger a render. The whole graph is re-drawn as if it's completely entering, and not transitioning.

Expected behavior: http://www.samsarin.com/project/dagre-d3/latest/demo/interactive-demo.html displays

Can add white lines, remove/add edges, and remove/add nodes with smooth transitions, as expected.

sagarrabadiya commented 6 years ago

looking for the solution to same problem, is there any work around for transition (not to draw entire graph)?

agg23 commented 6 years ago

Same issue here as well. I attempted to find where the regression was introduced, but packages are not cooperating.

leoetlino commented 6 years ago

Also noticed the same issue. I did a quick bisect and here are the results:

4255a0f - (tag: v0.5.0, refs/bisect/bad) Prep v0.5.0 release (7 months ago) 862e64a - (refs/bisect/skip-862e64a2845e0d946f8e717c55fd48293877d11c) Merge pull request #296 from dagrejs/d3v4 (7 months ago) ebbb84f - (refs/bisect/skip-ebbb84f03bd169061f40d7a1df82cb3b51860187) Update to D3.js v4 (7 months ago) f7b6155 - (refs/bisect/good-f7b6155c89fef2990d75f7e38e866c190682baa7) Merge pull request #295 from dagrejs/ignore_vscode (7 months ago) d532ee4 - Add .vscode to .gitignore (7 months ago) 26545cd - (refs/bisect/good-26545cd2874b41bb0e5024aa87f9919dfd5355ab) Merge pull request #292 from dagrejs/fix_bbox_class (7 months ago)

Unfortunately I had to skip some commits as the "interactive demo" demo wouldn't work (create-edge-paths.js:95 Uncaught TypeError: Cannot read property 'getBBox' of undefined). I'm reasonably sure ebbb84f (the update to D3.js v4) broke it, though.

HailToDodongo commented 6 years ago

Looks like some test code was still left in for example: https://github.com/dagrejs/dagre-d3/commit/ebbb84f03bd169061f40d7a1df82cb3b51860187#diff-1d2b4ec6a34c39474f81032fe8451954R17 Is this behavior correct? Also look a few lines above

agg23 commented 6 years ago

@HailToDodongo What makes you think it is test code? It does seem odd that upgrading to D3 v4 would require changing how selections are done, but it's not unbelievable either.

lutzroeder commented 6 years ago

Some context: Most of this change is ported from tylingsoft/dagre-d3-renderer@46055d9349c63440dfd694aff3c640d3993cc68b. There was another fork smbolton/dagre-d3v4@78f537785332005b618e087e4226c0267c069ec6. Feel free to compare and submit a PR with a fix.

agg23 commented 5 years ago

I believe with the merge of #342 this should now be closed. I would advocate for a new NPM release going out with this fix, as it's pretty significant from a usability perspective.

deanp70 commented 5 years ago

@agg23 Has this been fixed? The interactive demo on the site still re-renders completely on every change. Also for my project i'm using the minimized link from the wiki which is supposed to be the most recent, and I still have this problem.

Would really appreciate help :)

agg23 commented 5 years ago

It has been fixed (at least in my tests), but it has not been pushed to NPM, as I asked above. If you manually install the latest version, you will find that it animates correctly.

deanp70 commented 5 years ago

I did it and it worked. Thank you.