Learn D3.js

Using Canvas

If you have a very large tree, with thousands of nodes, you may experience performance problems because of the large amount of objects that will be created by the DOM, draining your memory resources. A common optimization procedure is to render static parts of your chart using HTML Canvas. Although you lose some interactive facilities, which are harder to implement using Canvas, the gain in performance may be worth the effort.

In this section we will create a Canvas-version of the Tree/10-pathlinks.html file. Although it's not a large tree that would benefit from a Canvas implementation, it's useful to demonstrate the general pattern that can be applied to larger datasets. In the Examples/ folder you will find other examples ...