Gantt chart with D3

d3monster picture d3monster · Feb 4, 2013 · Viewed 12.6k times · Source

I've been working on a D3 Gantt chart; it has a brush view, column labels for the tree grid view (I need this for my application), and tooltip. The chart allows you to expand and shrink nodes using the tree view, by clicking on the node in the tree hierarchy.

With respect to the issues I have encountered, there is a noticeable slowdown in brush scrolling over time, and I originally thought it was possible I was not removing nodes that I should be and it was causing the slow down, but I did spend time checking this issue and it doesn't seem to be the case. It doesn't yet support clipping and the activity bars in the chart overlap with the tree grid when you scroll the brush. It seems to slow down, and is a bit slow in firefox, but if you shrink and expand the top level node in the tree grid view, scrolling of the tree brush becomes faster again.

I need assistance with the following issues:

  1. clipping; I'm not sure how to modify the code to make this work.
  2. delayed scrolling of the chart view when the brush is used, so the brush doesn't call update on every move.
  3. some guidance on how I can resolve the slow down that occurs over time when the brush is used.

You can see it here (full screen) : http://bl.ocks.org/d/4704709/

I added the full screen view, as the normal bl.ocks view is too small to fit it.

and it's on github here for those that want to branch it and do something far better with it than I am capable of doing :

https://gist.github.com/4704709

Answer