search

codesuki / react-d3-components

D3 Components for React
http://codesuki.github.io/react-d3-components/example.html
MIT License
1.62k stars 205 forks source link

D3 v4 and reducing bundle size #133

Open PierreGUI opened 7 years ago

PierreGUI commented 7 years ago

Hey there, Thanks for amazing work!

I'm showing one tiny graph on my page and d3 is now my biggest dependency (appart from react). Even for minimal use, importing the whole d3 v3.5 is necessary...

Any plan on moving to d3 v4? That'd be awesome (even though I'm not sure how much work is necessary (: )

codesuki commented 7 years ago

Hey, thank you!

Have you considered tree shaking? I didn't check yet in my projects but reading about it, it should be helpful in your case. https://blog.craftlab.hu/how-to-do-proper-tree-shaking-in-webpack-2-e27852af8b21

I just checked out the d3 v4 change log and there is a lot of stuff going on. It touches almost every part of the library. While I would really like to move to v4 I am so busy otherwise that I cannot make any promises. I think there is so much to improve here but just absolutely crippled by work.

Sorry I couldn't give you any good news!

PierreGUI commented 7 years ago

Yes indeed tree shaking would be a perfect solution. Only it currently works with libraries using es2015 imports, which d3 isn't. Per design, d3 v4 brings modularity, enabling developers to be more specific on what they want to import or not.

I'll have a look later on this weekend see what's required to move to v4 (like you said, lots of changes) Cheers

PierreGUI commented 7 years ago

Yo, I gave it a try. Easy part is to change all d3 old namespaces to the new ones (d3.scale.linear -> d3.scaleLinear). Most of the functions behave the same... until you get to d3.layout.stack and its accessors. Here Mike changed the output and it has quite an impact on the way your library should handle it (basically change all data structure and accessors).

Where the stack layout used to send back your dataset with x and y, ordered with baseline y0, it now takes keys as argument and sends back a corresponding matrix (which doesn't contain x). Makes it more flexible, readable, but in our case it also brings some changes to the mixins.

Now, I'm not very familiar with d3 and I don't use stack (very simple graph I make :P), so I didn't go further than fixing namespace. My AreaChart works nicely using d3v4 so far.

I still think it's doable and definitely worth trying since d3 v4 seems to be awesome. Cheers

retyui commented 6 years ago

@PierreGUI I work on migration, and I just need help with the method d3.layout.stack

PierreGUI commented 6 years ago

Oh man that was a year ago... I'm afraid I won't be of much help. As far as I remember you carry a data structure across your components where you store x, y, y0 (from old stack). The new stack doesn't provide the same output so it requires a change in the way you store and pass props. I'll have a look again see if it makes more sense today, even though I haven't been using d3 for a year...

Cheers

Edit: afaiu new d3 stack sends back a matrix with one line per series and column contains the (y0, y) values corresponding. x is now the index of the matrix column.

Looking at example on the official doc, it now looks like this image

I'm wondering about your mixins, will you move away from it now that they are deprecated?

retyui commented 6 years ago

@PierreGUI

I'm wondering about your mixins, will you move away from it now that they are deprecated?

Yes i know about the problem the following commit will just help rid of myxins. https://github.com/codesuki/react-d3-components/issues/120