Clickable link Drag and Drop zoomable D3.js tree example.

README.md

Clickable link Drag and Drop zoomable D3.js tree example based on https://gist.github.com/robschmuecker/7880033 for question here: http://stackoverflow.com/questions/24100458/d3-js-drag-and-drop-zoomable-tree-help-in-collapsing-nodes-connected-by-a-certai

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

dndTree.js

// Get JSON data
treeJSON = d3.json("flare.json", function(error, treeData) {
console.log(treeData);
console.log(error);
console.log(treeJSON);

    // Calculate total nodes, max label length
    var totalNodes = 0;
    var maxLabelLength = 0;
    // variables for drag/drop
    var selectedNode = null;
    var draggingNode = null;
    // panning variables
    var panSpeed = 200;
    var panBoundary = 20; // Within 20px from edges will pan when dragging.
    // Misc. variables
    var i = 0;
    var duration = 750;
    var root;

    // size of the diagram
    var viewerWidth = $(document).width();
    var viewerHeight = $(document).height();

    var tree = d3.layout.tree()
        .size([viewerHeight, viewerWidth]);

    // define a d3 diagonal projection for use by the node paths later on.
    var diagonal = d3.svg.diagonal()
        .projection(function(d) {
            return [d.y, d.x];
        });

    // A recursive helper function for performing some setup by walking through all nodes

    function visit(parent, visitFn, childrenFn) {
        if (!parent) return;

        visitFn(parent);

        var children = childrenFn(parent);
        if (children) {
            var count = children.length;
            for (var i = 0; i < count; i++) {
                visit(children[i], visitFn, childrenFn);
            }
        }
    }

    // Call visit function to establish maxLabelLength
    visit(treeData, function(d) {
        totalNodes++;
        maxLabelLength = Math.max(d.name.length, maxLabelLength);

    }, function(d) {
        return d.children && d.children.length > 0 ? d.children : null;
    });
	console.log(totalNodes);


    // sort the tree according to the node names

    function sortTree() {
        tree.sort(function(a, b) {
            return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
        });
    }
    // Sort the tree initially incase the JSON isn't in a sorted order.
    sortTree();

    // TODO: Pan function, can be better implemented.

    function pan(domNode, direction) {
        var speed = panSpeed;
        if (panTimer) {
            clearTimeout(panTimer);
            translateCoords = d3.transform(svgGroup.attr("transform"));
            if (direction == 'left' || direction == 'right') {
                translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed;
                translateY = translateCoords.translate[1];
            } else if (direction == 'up' || direction == 'down') {
                translateX = translateCoords.translate[0];
                translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed;
            }
            scaleX = translateCoords.scale[0];
            scaleY = translateCoords.scale[1];
            scale = zoomListener.scale();
            svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")");
            d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")");
            zoomListener.scale(zoomListener.scale());
            zoomListener.translate([translateX, translateY]);
            panTimer = setTimeout(function() {
                pan(domNode, speed, direction);
            }, 50);
        }
    }

    // Define the zoom function for the zoomable tree

    function zoom() {
        svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }


    // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
    var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);

    function initiateDrag(d, domNode) {
        draggingNode = d;
        d3.select(domNode).select('.ghostCircle').attr('pointer-events', 'none');
        d3.selectAll('.ghostCircle').attr('class', 'ghostCircle show');
        d3.select(domNode).attr('class', 'node activeDrag');

        svgGroup.selectAll("g.node").sort(function(a, b) { // select the parent and sort the path's
            if (a.id != draggingNode.id) return 1; // a is not the hovered element, send "a" to the back
            else return -1; // a is the hovered element, bring "a" to the front
        });
        // if nodes has children, remove the links and nodes
        if (nodes.length > 1) {
            // remove link paths
            links = tree.links(nodes);
            nodePaths = svgGroup.selectAll("path.link")
                .data(links, function(d) {
                    return d.target.id;
                }).remove();
            // remove child nodes
            nodesExit = svgGroup.selectAll("g.node")
                .data(nodes, function(d) {
                    return d.id;
                }).filter(function(d, i) {
                    if (d.id == draggingNode.id) {
                        return false;
                    }
                    return true;
                }).remove();
        }

        // remove parent link
        parentLink = tree.links(tree.nodes(draggingNode.parent));
        svgGroup.selectAll('path.link').filter(function(d, i) {
            if (d.target.id == draggingNode.id) {
                return true;
            }
            return false;
        }).remove();

        dragStarted = null;
    }

    // define the baseSvg, attaching a class for styling and the zoomListener
    var baseSvg = d3.select("#tree-container").append("svg")
        .attr("width", viewerWidth)
        .attr("height", viewerHeight)
        .attr("class", "overlay")
        .call(zoomListener);


    // Define the drag listeners for drag/drop behaviour of nodes.
    dragListener = d3.behavior.drag()
        .on("dragstart", function(d) {
            if (d == root) {
                return;
            }
            dragStarted = true;
            nodes = tree.nodes(d);
            d3.event.sourceEvent.stopPropagation();
            // it's important that we suppress the mouseover event on the node being dragged. Otherwise it will absorb the mouseover event and the underlying node will not detect it d3.select(this).attr('pointer-events', 'none');
        })
        .on("drag", function(d) {
            if (d == root) {
                return;
            }
            if (dragStarted) {
                domNode = this;
                initiateDrag(d, domNode);
            }

            // get coords of mouseEvent relative to svg container to allow for panning
            relCoords = d3.mouse($('svg').get(0));
            if (relCoords[0] < panBoundary) {
                panTimer = true;
                pan(this, 'left');
            } else if (relCoords[0] > ($('svg').width() - panBoundary)) {

                panTimer = true;
                pan(this, 'right');
            } else if (relCoords[1] < panBoundary) {
                panTimer = true;
                pan(this, 'up');
            } else if (relCoords[1] > ($('svg').height() - panBoundary)) {
                panTimer = true;
                pan(this, 'down');
            } else {
                try {
                    clearTimeout(panTimer);
                } catch (e) {

                }
            }

            d.x0 += d3.event.dy;
            d.y0 += d3.event.dx;
            var node = d3.select(this);
            node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")");
            updateTempConnector();
        }).on("dragend", function(d) {
            if (d == root) {
                return;
            }
            domNode = this;
            if (selectedNode) {
                // now remove the element from the parent, and insert it into the new elements children
                var index = draggingNode.parent.children.indexOf(draggingNode);
                if (index > -1) {
                    draggingNode.parent.children.splice(index, 1);
                }
                if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') {
                    if (typeof selectedNode.children !== 'undefined') {
                        selectedNode.children.push(draggingNode);
                    } else {
                        selectedNode._children.push(draggingNode);
                    }
                } else {
                    selectedNode.children = [];
                    selectedNode.children.push(draggingNode);
                }
                // Make sure that the node being added to is expanded so user can see added node is correctly moved
                expand(selectedNode);
                sortTree();
                endDrag();
            } else {
                endDrag();
            }
        });

    function endDrag() {
        selectedNode = null;
        d3.selectAll('.ghostCircle').attr('class', 'ghostCircle');
        d3.select(domNode).attr('class', 'node');
        // now restore the mouseover event or we won't be able to drag a 2nd time
        d3.select(domNode).select('.ghostCircle').attr('pointer-events', '');
        updateTempConnector();
        if (draggingNode !== null) {
            update(root);
            centerNode(draggingNode);
            draggingNode = null;
        }
    }

    // Helper functions for collapsing and expanding nodes.

    function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }

    function expand(d) {
        if (d._children) {
            d.children = d._children;
            d.children.forEach(expand);
            d._children = null;
        }
    }

    var overCircle = function(d) {
        selectedNode = d;
        updateTempConnector();
    };
    var outCircle = function(d) {
        selectedNode = null;
        updateTempConnector();
    };

    // Function to update the temporary connector indicating dragging affiliation
    var updateTempConnector = function() {
        var data = [];
        if (draggingNode !== null && selectedNode !== null) {
            // have to flip the source coordinates since we did this for the existing connectors on the original tree
            data = [{
                source: {
                    x: selectedNode.y0,
                    y: selectedNode.x0
                },
                target: {
                    x: draggingNode.y0,
                    y: draggingNode.x0
                }
            }];
        }
        var link = svgGroup.selectAll(".templink").data(data);

        link.enter().append("path")
            .attr("class", "templink")
            .attr("d", d3.svg.diagonal())
            .attr('pointer-events', 'none');

        link.attr("d", d3.svg.diagonal());

        link.exit().remove();
    };

    // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.

    function centerNode(source) {
        scale = zoomListener.scale();
        x = -source.y0;
        y = -source.x0;
        x = x * scale + viewerWidth / 2;
        y = y * scale + viewerHeight / 2;
        d3.select('g').transition()
            .duration(duration)
            .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
        zoomListener.scale(scale);
        zoomListener.translate([x, y]);
    }

    // Toggle children function

    function toggleChildren(d) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else if (d._children) {
            d.children = d._children;
            d._children = null;
        }
        return d;
    }

    // Toggle children on click.

    function click(d) {
        if (d3.event.defaultPrevented) return; // click suppressed
        d = toggleChildren(d);
        update(d);
        centerNode(d);
    }
	
	function clickLink(d) {
		d = d.target;
		console.log(d);
        //if (d3.event.defaultPrevented) return; // click suppressed
        d = toggleChildren(d);
        update(d);
        centerNode(d);
    }

    function update(source) {
	console.log(treeData);
        // Compute the new height, function counts total children of root node and sets tree height accordingly.
        // This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed
        // This makes the layout more consistent.
        var levelWidth = [1];
        var childCount = function(level, n) {

            if (n.children && n.children.length > 0) {
                if (levelWidth.length <= level + 1) levelWidth.push(0);

                levelWidth[level + 1] += n.children.length;
                n.children.forEach(function(d) {
                    childCount(level + 1, d);
                });
            }
        };
        childCount(0, root);
        var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line  
        tree = tree.size([newHeight, viewerWidth]);

        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);

        // Set widths between levels based on maxLabelLength.
        nodes.forEach(function(d) {
            d.y = (d.depth * (maxLabelLength * 10)); //maxLabelLength * 10px
            // alternatively to keep a fixed scale one can set a fixed depth per level
            // Normalize for fixed-depth by commenting out below line
            // d.y = (d.depth * 500); //500px per level.
        });

        // Update the nodes…
        node = svgGroup.selectAll("g.node")
            .data(nodes, function(d) {
                return d.id || (d.id = ++i);
            });

        // Enter any new nodes at the parent's previous position.
        var nodeEnter = node.enter().append("g")
            .call(dragListener)
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + source.y0 + "," + source.x0 + ")";
            })
            .on('click', click);

        nodeEnter.append("circle")
            .attr('class', 'nodeCircle')
            .attr("r", 0)
            .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        nodeEnter.append("text")
            .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
            })
            .attr("dy", ".35em")
            .attr('class', 'nodeText')
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function(d) {
                return d.name;
            })
            .style("fill-opacity", 0);

        // phantom node to give us mouseover in a radius around it
        nodeEnter.append("circle")
            .attr('class', 'ghostCircle')
            .attr("r", 30)
            .attr("opacity", 0.2) // change this to zero to hide the target area
        .style("fill", "red")
            .attr('pointer-events', 'mouseover')
            .on("mouseover", function(node) {
                overCircle(node);
            })
            .on("mouseout", function(node) {
                outCircle(node);
            });

        // Update the text to reflect whether node has children or not.
        node.select('text')
            .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
            })
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function(d) {
                return d.name;
            });

        // Change the circle fill depending on whether it has children and is collapsed
        node.select("circle.nodeCircle")
            .attr("r", 4.5)
            .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        // Transition nodes to their new position.
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function(d) {
                return "translate(" + d.y + "," + d.x + ")";
            });

        // Fade the text in
        nodeUpdate.select("text")
            .style("fill-opacity", 1);

        // Transition exiting nodes to the parent's new position.
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function(d) {
                return "translate(" + source.y + "," + source.x + ")";
            })
            .remove();

        nodeExit.select("circle")
            .attr("r", 0);

        nodeExit.select("text")
            .style("fill-opacity", 0);

        // Update the links…
        var link = svgGroup.selectAll("path.link")
            .data(links, function(d) {
                return d.target.id;
            });

        // Enter any new links at the parent's previous position.
        link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("d", function(d) {
                var o = {
                    x: source.x0,
                    y: source.y0
                };
                return diagonal({
                    source: o,
                    target: o
                });
            })
            .on('click', clickLink);

        // Transition links to their new position.
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position.
        link.exit().transition()
            .duration(duration)
            .attr("d", function(d) {
                var o = {
                    x: source.x,
                    y: source.y
                };
                return diagonal({
                    source: o,
                    target: o
                });
            })
            .remove();

        // Stash the old positions for transition.
        nodes.forEach(function(d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

    // Append a group which holds all nodes and which the zoom Listener can act upon.
    var svgGroup = baseSvg.append("g");

    // Define the root
    root = treeData;
    root.x0 = viewerHeight / 2;
    root.y0 = 0;
	
	// Collapse all children of roots children before rendering.
	root.children.forEach(function(child){
		collapse(child);
	});

    // Layout the tree initially and center on the root node.
    update(root);
    centerNode(root);
});

flare.json

{
    "name": "flare",
    "children": [{
        "name": "analytics",
        "children": [{
            "name": "cluster",
            "children": [{
                "name": "AgglomerativeCluster",
                "size": 3938
            }, {
                "name": "CommunityStructure",
                "size": 3812
            }, {
                "name": "HierarchicalCluster",
                "size": 6714
            }, {
                "name": "MergeEdge",
                "size": 743
            }]
        }, {
            "name": "graph",
            "children": [{
                "name": "BetweennessCentrality",
                "size": 3534
            }, {
                "name": "LinkDistance",
                "size": 5731
            }, {
                "name": "MaxFlowMinCut",
                "size": 7840
            }, {
                "name": "ShortestPaths",
                "size": 5914
            }, {
                "name": "SpanningTree",
                "size": 3416
            }]
        }, {
            "name": "optimization",
            "children": [{
                "name": "AspectRatioBanker",
                "size": 7074
            }]
        }]
    }, {
        "name": "animate",
        "children": [{
            "name": "Easing",
            "size": 17010
        }, {
            "name": "FunctionSequence",
            "size": 5842
        }, {
            "name": "interpolate",
            "children": [{
                "name": "ArrayInterpolator",
                "size": 1983
            }, {
                "name": "ColorInterpolator",
                "size": 2047
            }, {
                "name": "DateInterpolator",
                "size": 1375
            }, {
                "name": "Interpolator",
                "size": 8746
            }, {
                "name": "MatrixInterpolator",
                "size": 2202
            }, {
                "name": "NumberInterpolator",
                "size": 1382
            }, {
                "name": "ObjectInterpolator",
                "size": 1629
            }, {
                "name": "PointInterpolator",
                "size": 1675
            }, {
                "name": "RectangleInterpolator",
                "size": 2042
            }]
        }, {
            "name": "ISchedulable",
            "size": 1041
        }, {
            "name": "Parallel",
            "size": 5176
        }, {
            "name": "Pause",
            "size": 449
        }, {
            "name": "Scheduler",
            "size": 5593
        }, {
            "name": "Sequence",
            "size": 5534
        }, {
            "name": "Transition",
            "size": 9201
        }, {
            "name": "Transitioner",
            "size": 19975
        }, {
            "name": "TransitionEvent",
            "size": 1116
        }, {
            "name": "Tween",
            "size": 6006
        }]
    }, {
        "name": "data",
        "children": [{
            "name": "converters",
            "children": [{
                "name": "Converters",
                "size": 721
            }, {
                "name": "DelimitedTextConverter",
                "size": 4294
            }, {
                "name": "GraphMLConverter",
                "size": 9800
            }, {
                "name": "IDataConverter",
                "size": 1314
            }, {
                "name": "JSONConverter",
                "size": 2220
            }]
        }, {
            "name": "DataField",
            "size": 1759
        }, {
            "name": "DataSchema",
            "size": 2165
        }, {
            "name": "DataSet",
            "size": 586
        }, {
            "name": "DataSource",
            "size": 3331
        }, {
            "name": "DataTable",
            "size": 772
        }, {
            "name": "DataUtil",
            "size": 3322
        }]
    }, {
        "name": "display",
        "children": [{
            "name": "DirtySprite",
            "size": 8833
        }, {
            "name": "LineSprite",
            "size": 1732
        }, {
            "name": "RectSprite",
            "size": 3623
        }, {
            "name": "TextSprite",
            "size": 10066
        }]
    }, {
        "name": "flex",
        "children": [{
            "name": "FlareVis",
            "size": 4116
        }]
    }, {
        "name": "physics",
        "children": [{
            "name": "DragForce",
            "size": 1082
        }, {
            "name": "GravityForce",
            "size": 1336
        }, {
            "name": "IForce",
            "size": 319
        }, {
            "name": "NBodyForce",
            "size": 10498
        }, {
            "name": "Particle",
            "size": 2822
        }, {
            "name": "Simulation",
            "size": 9983
        }, {
            "name": "Spring",
            "size": 2213
        }, {
            "name": "SpringForce",
            "size": 1681
        }]
    }, {
        "name": "query",
        "children": [{
            "name": "AggregateExpression",
            "size": 1616
        }, {
            "name": "And",
            "size": 1027
        }, {
            "name": "Arithmetic",
            "size": 3891
        }, {
            "name": "Average",
            "size": 891
        }, {
            "name": "BinaryExpression",
            "size": 2893
        }, {
            "name": "Comparison",
            "size": 5103
        }, {
            "name": "CompositeExpression",
            "size": 3677
        }, {
            "name": "Count",
            "size": 781
        }, {
            "name": "DateUtil",
            "size": 4141
        }, {
            "name": "Distinct",
            "size": 933
        }, {
            "name": "Expression",
            "size": 5130
        }, {
            "name": "ExpressionIterator",
            "size": 3617
        }, {
            "name": "Fn",
            "size": 3240
        }, {
            "name": "If",
            "size": 2732
        }, {
            "name": "IsA",
            "size": 2039
        }, {
            "name": "Literal",
            "size": 1214
        }, {
            "name": "Match",
            "size": 3748
        }, {
            "name": "Maximum",
            "size": 843
        }, {
            "name": "methods",
            "children": [{
                "name": "add",
                "size": 593
            }, {
                "name": "and",
                "size": 330
            }, {
                "name": "average",
                "size": 287
            }, {
                "name": "count",
                "size": 277
            }, {
                "name": "distinct",
                "size": 292
            }, {
                "name": "div",
                "size": 595
            }, {
                "name": "eq",
                "size": 594
            }, {
                "name": "fn",
                "size": 460
            }, {
                "name": "gt",
                "size": 603
            }, {
                "name": "gte",
                "size": 625
            }, {
                "name": "iff",
                "size": 748
            }, {
                "name": "isa",
                "size": 461
            }, {
                "name": "lt",
                "size": 597
            }, {
                "name": "lte",
                "size": 619
            }, {
                "name": "max",
                "size": 283
            }, {
                "name": "min",
                "size": 283
            }, {
                "name": "mod",
                "size": 591
            }, {
                "name": "mul",
                "size": 603
            }, {
                "name": "neq",
                "size": 599
            }, {
                "name": "not",
                "size": 386
            }, {
                "name": "or",
                "size": 323
            }, {
                "name": "orderby",
                "size": 307
            }, {
                "name": "range",
                "size": 772
            }, {
                "name": "select",
                "size": 296
            }, {
                "name": "stddev",
                "size": 363
            }, {
                "name": "sub",
                "size": 600
            }, {
                "name": "sum",
                "size": 280
            }, {
                "name": "update",
                "size": 307
            }, {
                "name": "variance",
                "size": 335
            }, {
                "name": "where",
                "size": 299
            }, {
                "name": "xor",
                "size": 354
            }, {
                "name": "_",
                "size": 264
            }]
        }, {
            "name": "Minimum",
            "size": 843
        }, {
            "name": "Not",
            "size": 1554
        }, {
            "name": "Or",
            "size": 970
        }, {
            "name": "Query",
            "size": 13896
        }, {
            "name": "Range",
            "size": 1594
        }, {
            "name": "StringUtil",
            "size": 4130
        }, {
            "name": "Sum",
            "size": 791
        }, {
            "name": "Variable",
            "size": 1124
        }, {
            "name": "Variance",
            "size": 1876
        }, {
            "name": "Xor",
            "size": 1101
        }]
    }, {
        "name": "scale",
        "children": [{
            "name": "IScaleMap",
            "size": 2105
        }, {
            "name": "LinearScale",
            "size": 1316
        }, {
            "name": "LogScale",
            "size": 3151
        }, {
            "name": "OrdinalScale",
            "size": 3770
        }, {
            "name": "QuantileScale",
            "size": 2435
        }, {
            "name": "QuantitativeScale",
            "size": 4839
        }, {
            "name": "RootScale",
            "size": 1756
        }, {
            "name": "Scale",
            "size": 4268
        }, {
            "name": "ScaleType",
            "size": 1821
        }, {
            "name": "TimeScale",
            "size": 5833
        }]
    }, {
        "name": "util",
        "children": [{
            "name": "Arrays",
            "size": 8258
        }, {
            "name": "Colors",
            "size": 10001
        }, {
            "name": "Dates",
            "size": 8217
        }, {
            "name": "Displays",
            "size": 12555
        }, {
            "name": "Filter",
            "size": 2324
        }, {
            "name": "Geometry",
            "size": 10993
        }, {
            "name": "heap",
            "children": [{
                "name": "FibonacciHeap",
                "size": 9354
            }, {
                "name": "HeapNode",
                "size": 1233
            }]
        }, {
            "name": "IEvaluable",
            "size": 335
        }, {
            "name": "IPredicate",
            "size": 383
        }, {
            "name": "IValueProxy",
            "size": 874
        }, {
            "name": "math",
            "children": [{
                "name": "DenseMatrix",
                "size": 3165
            }, {
                "name": "IMatrix",
                "size": 2815
            }, {
                "name": "SparseMatrix",
                "size": 3366
            }]
        }, {
            "name": "Maths",
            "size": 17705
        }, {
            "name": "Orientation",
            "size": 1486
        }, {
            "name": "palette",
            "children": [{
                "name": "ColorPalette",
                "size": 6367
            }, {
                "name": "Palette",
                "size": 1229
            }, {
                "name": "ShapePalette",
                "size": 2059
            }, {
                "name": "SizePalette",
                "size": 2291
            }]
        }, {
            "name": "Property",
            "size": 5559
        }, {
            "name": "Shapes",
            "size": 19118
        }, {
            "name": "Sort",
            "size": 6887
        }, {
            "name": "Stats",
            "size": 6557
        }, {
            "name": "Strings",
            "size": 22026
        }]
    }, {
        "name": "vis",
        "children": [{
            "name": "axis",
            "children": [{
                "name": "Axes",
                "size": 1302
            }, {
                "name": "Axis",
                "size": 24593
            }, {
                "name": "AxisGridLine",
                "size": 652
            }, {
                "name": "AxisLabel",
                "size": 636
            }, {
                "name": "CartesianAxes",
                "size": 6703
            }]
        }, {
            "name": "controls",
            "children": [{
                "name": "AnchorControl",
                "size": 2138
            }, {
                "name": "ClickControl",
                "size": 3824
            }, {
                "name": "Control",
                "size": 1353
            }, {
                "name": "ControlList",
                "size": 4665
            }, {
                "name": "DragControl",
                "size": 2649
            }, {
                "name": "ExpandControl",
                "size": 2832
            }, {
                "name": "HoverControl",
                "size": 4896
            }, {
                "name": "IControl",
                "size": 763
            }, {
                "name": "PanZoomControl",
                "size": 5222
            }, {
                "name": "SelectionControl",
                "size": 7862
            }, {
                "name": "TooltipControl",
                "size": 8435
            }]
        }, {
            "name": "data",
            "children": [{
                "name": "Data",
                "size": 20544
            }, {
                "name": "DataList",
                "size": 19788
            }, {
                "name": "DataSprite",
                "size": 10349
            }, {
                "name": "EdgeSprite",
                "size": 3301
            }, {
                "name": "NodeSprite",
                "size": 19382
            }, {
                "name": "render",
                "children": [{
                    "name": "ArrowType",
                    "size": 698
                }, {
                    "name": "EdgeRenderer",
                    "size": 5569
                }, {
                    "name": "IRenderer",
                    "size": 353
                }, {
                    "name": "ShapeRenderer",
                    "size": 2247
                }]
            }, {
                "name": "ScaleBinding",
                "size": 11275
            }, {
                "name": "Tree",
                "size": 7147
            }, {
                "name": "TreeBuilder",
                "size": 9930
            }]
        }, {
            "name": "events",
            "children": [{
                "name": "DataEvent",
                "size": 2313
            }, {
                "name": "SelectionEvent",
                "size": 1880
            }, {
                "name": "TooltipEvent",
                "size": 1701
            }, {
                "name": "VisualizationEvent",
                "size": 1117
            }]
        }, {
            "name": "legend",
            "children": [{
                "name": "Legend",
                "size": 20859
            }, {
                "name": "LegendItem",
                "size": 4614
            }, {
                "name": "LegendRange",
                "size": 10530
            }]
        }, {
            "name": "operator",
            "children": [{
                "name": "distortion",
                "children": [{
                    "name": "BifocalDistortion",
                    "size": 4461
                }, {
                    "name": "Distortion",
                    "size": 6314
                }, {
                    "name": "FisheyeDistortion",
                    "size": 3444
                }]
            }, {
                "name": "encoder",
                "children": [{
                    "name": "ColorEncoder",
                    "size": 3179
                }, {
                    "name": "Encoder",
                    "size": 4060
                }, {
                    "name": "PropertyEncoder",
                    "size": 4138
                }, {
                    "name": "ShapeEncoder",
                    "size": 1690
                }, {
                    "name": "SizeEncoder",
                    "size": 1830
                }]
            }, {
                "name": "filter",
                "children": [{
                    "name": "FisheyeTreeFilter",
                    "size": 5219
                }, {
                    "name": "GraphDistanceFilter",
                    "size": 3165
                }, {
                    "name": "VisibilityFilter",
                    "size": 3509
                }]
            }, {
                "name": "IOperator",
                "size": 1286
            }, {
                "name": "label",
                "children": [{
                    "name": "Labeler",
                    "size": 9956
                }, {
                    "name": "RadialLabeler",
                    "size": 3899
                }, {
                    "name": "StackedAreaLabeler",
                    "size": 3202
                }]
            }, {
                "name": "layout",
                "children": [{
                    "name": "AxisLayout",
                    "size": 6725
                }, {
                    "name": "BundledEdgeRouter",
                    "size": 3727
                }, {
                    "name": "CircleLayout",
                    "size": 9317
                }, {
                    "name": "CirclePackingLayout",
                    "size": 12003
                }, {
                    "name": "DendrogramLayout",
                    "size": 4853
                }, {
                    "name": "ForceDirectedLayout",
                    "size": 8411
                }, {
                    "name": "IcicleTreeLayout",
                    "size": 4864
                }, {
                    "name": "IndentedTreeLayout",
                    "size": 3174
                }, {
                    "name": "Layout",
                    "size": 7881
                }, {
                    "name": "NodeLinkTreeLayout",
                    "size": 12870
                }, {
                    "name": "PieLayout",
                    "size": 2728
                }, {
                    "name": "RadialTreeLayout",
                    "size": 12348
                }, {
                    "name": "RandomLayout",
                    "size": 870
                }, {
                    "name": "StackedAreaLayout",
                    "size": 9121
                }, {
                    "name": "TreeMapLayout",
                    "size": 9191
                }]
            }, {
                "name": "Operator",
                "size": 2490
            }, {
                "name": "OperatorList",
                "size": 5248
            }, {
                "name": "OperatorSequence",
                "size": 4190
            }, {
                "name": "OperatorSwitch",
                "size": 2581
            }, {
                "name": "SortOperator",
                "size": 2023
            }]
        }, {
            "name": "Visualization",
            "size": 16540
        }]
    }]
}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
  
  .node, .link {
    cursor: pointer;
  }

  .overlay{
      background-color:#EEE;
  }
   
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
   
  .node text {
    font-size:10px; 
    font-family:sans-serif;
  }
   
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 4px;
  }

  .templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
  }

  .ghostCircle.show{
      display:block;
  }

  .ghostCircle, .activeDrag .ghostCircle{
       display: none;
  }

</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="dndTree.js"></script>
<body>
    <div id="tree-container"></div>
</body>
</html>

thumbnail.png

can u plz do the drag and drop zoomable of Radial cluster i.e Cluster Dendrogram (http://bl.ocks.org/mbostock/4339607)

I'm using your fantastic collapsible tree code. I've rendering issue on Mac os x but not on Windows. Is there a d3.v4 compatible version of your code? May be that it resolve the issue.