I needed a pie library to include at https://my-netdata.io and d3pie was ideal for that purpose.
But it was slow.
So, I modified it a bit:
The code had these performance killers:
transitions that unfortunately could not be disabled - so I removed them. Actually d3 transitions are async, while I needed the whole rendering to be synced under conditions, and there was no easy way to fix it (a transition duration of zero, does not disable async).
extensive use of d3.select() and d3.selectAll(). These kill performance when the page is huge (like netdata dashboards). I cached all that was easy to cache, and I replaced the rest with pie.svg.select() and pie.svg.selectAll() respectively to constrain the dom searches within the chart. However, even these are problematic. Ideally, a chart library should not perform any dom searches.
I also fixed a bug that was not closing an open segment when a new was clicked (you need to pass pie to that function).
Finally, I added:
The ability to set font weight for all labels
The ability to set font color to segment, so that the labels could get the the color of the segment, like this:
Hi,
thank you for d3pie!
I needed a pie library to include at https://my-netdata.io and d3pie was ideal for that purpose. But it was slow.
So, I modified it a bit:
The code had these performance killers:
transitions that unfortunately could not be disabled - so I removed them. Actually d3 transitions are async, while I needed the whole rendering to be synced under conditions, and there was no easy way to fix it (a transition duration of zero, does not disable async).
extensive use of
d3.select()
andd3.selectAll()
. These kill performance when the page is huge (like netdata dashboards). I cached all that was easy to cache, and I replaced the rest withpie.svg.select()
andpie.svg.selectAll()
respectively to constrain the dom searches within the chart. However, even these are problematic. Ideally, a chart library should not perform any dom searches.I also fixed a bug that was not closing an open segment when a new was clicked (you need to pass
pie
to that function).Finally, I added:
segment
, so that the labels could get the the color of the segment, like this:The modified version can be found here: https://github.com/firehol/netdata/tree/master/web/lib (we increase the version of the filename on every change, so search for
d3pie-0.2.1-netdata-XXX.js
to get the latest.It is not yet the fastest that can be, but it is now quite usable for me.
Again... thank you for d3pie. Nice work!
btw, since netdata re-destributes the modified version of d3pie, I have mentioned you to its redistributed software notice: https://github.com/firehol/netdata/blob/master/LICENSE-REDISTRIBUTED.md