All examples By author By category About

robschmuecker

Drag and drop, collapsible d3.js Tree with 50,000 nodes

This is an example of a collapsible drag and drop tree implementing slightly modified code from https://gist.github.com/robschmuecker/7880033

This is posted in order to demonstrate a viable answer for a Stack Overflow question http://stackoverflow.com/questions/20539922/has-anyone-produced-a-virtualised-javascript-tree-for-thousands-of-nodes

The only difference between this gist and the one referenced above is that the JSON file has changed. Each node contains 15 children and the depth is 4. Hence over 50,000 nodes.

The performance is fine if not too many of the nodes are present at once in the DOM. The JSON was contructed at http://www.json-generator.com/ with the following markup

{
        user_id: '{{index}}',
        name: '{{firstName}} {{surname}}',
        children: [
            '{{repeat(15)}}',
            {
                user_id: '{{index}}',
                name: '{{firstName}} {{surname}}',
                children: [
                    '{{repeat(15)}}',
                    {
                        user_id: '{{index}}',
                        name: '{{firstName}} {{surname}}',
                        children: [
                    '{{repeat(15)}}',
                    {
                        user_id: '{{index}}',
                        name: '{{firstName}} {{surname}}',
                        children: [
                        '{{repeat(15)}}',
                    {
                        user_id: '{{index}}',
                        name: '{{firstName}} {{surname}}'
                    }
                        ]
                    }
                ]
                    }
                ]
            }
        ]
}

For any help/queries, http://www.robschmuecker.com @robschmuecker or robert.schmuecker at gmail dot com