I developed a javascript component to display a tree, based on D3.jsI'm not sure how clean my code is, I'm not used to code a lot of javascript and I'm constrained to write everything in 1 file.So I'd take every advice on how to make this code better.And in particular, there's a behaviour I don't understand: a magical line of code which shouldn't affect anything, but when removed something is broken.Here's the whole code:ApplicationMap = function(vaadinConnector, element) {    var self = this;    this.vaadinConnector = vaadinConnector;    self.root = {};    var red = #f5696d;    var green = #40bc96;    var orange = #fabd57;    var grey = #e7e7e7;    var statusColor = function(status) {        if (status == SUCCESS) {            return green;        } else if (status == WARNING) {            return orange;        } else if (status == CRITICAL) {            return red;        } else {            return grey;        }    };    var domAttach = d3.select(element);    var nodeWidth = 100;    var nodeHeight = 70;    var tree = d3.layout.tree()        .nodeSize([nodeWidth + 10, nodeHeight + 20])        .separation(function (a, b) {            return (a.parent == b.parent ? 1.5 : 2.5);        });    var diagonal = d3.svg.diagonal()        .projection(function (d) {            return [d.x, d.y];        });    domAttach.html();    var cx = parseInt(domAttach.style('width')) / 2;    var cy = 50;    var vis = domAttach.append(svg:svg)        .attr(width, 100%)        .attr(height, 100%)        .append(svg:g);    vis.attr(transform, translate( + cx + , + cy + ));    // Toggle children    this.toggle = function(d) {        if (d.children) {            d.hiddenChildren = d.children;            d.children = null;        } else {            d.children = d.hiddenChildren;            d.hiddenChildren = null;        }    };    this.toggleAll = function(d) {        if (d.children) {            d.children.forEach(self.toggleAll);            self.toggle(d);        }    };    var update = function(source) {        var duration = d3.event && d3.event.altKey ? 5000 : 500;        // Compute the new tree layout.        var nodes = tree.nodes(self.root).reverse();        // Update the nodes        var node = vis.selectAll(g.node)            .data(nodes, function (d) {                return d.id;            });        // Enter any new nodes at the parent's previous position.        var nodeEnter = node.enter().append(svg:g)            .attr(class, node)            .attr(transform, function () {                return translate( + source.x0 + , + source.y0 + );            })            .on(click, function (d) {                self.vaadinConnector.onClickNode(d.name);            })            .on(mouseover, function () {                d3.select(this).classed(hover, true);            })            .on(mouseout, function () {                d3.select(this).classed(hover, false);            });        nodeEnter.append(svg:rect)            .attr(width, nodeWidth)            .attr(height, nodeHeight)            .attr(x, -nodeWidth / 2)            .attr(y, 7 - nodeHeight / 2)            .style(fill-opacity, 1e-6)            .style(fill, function (d) {                return statusColor(d.status);            });        nodeEnter.append(svg:text)            .attr(text-anchor, middle)            .attr(y, -5)            .classed(pointed, true)            .text(function (d) {                return d.name;            })            .style(fill-opacity, 1e-6);        // Expand / collapse icon        var filtered = nodeEnter.filter(function(d) {            return (d.children && d.children.length > 0) || (d.hiddenChildren && d.hiddenChildren.length > 0);        }).append(svg:text)            .attr(text-anchor, right)            .attr(x, 34)            .attr(y, 35)            .classed({                toggle-expand: true,                pointed: true,                faw: true            })            .style(fill-opacity, 1e-6)            .on(click, function(d) {                d3.event.stopPropagation();                self.toggle(d);                update(d);                d3.select(this).text(function(d) {                    return (d.children && d.children.length > 0) ? \uf150 : \uf151;                });            });        filtered.text(function(d) {            return (d.children && d.children.length > 0) ? \uf150 : \uf151;        });        // Transition nodes to their new position.        var nodeUpdate = node.transition()            .duration(duration)            .attr(transform, function(d) {                return translate( + d.x + , + d.y + );            });        nodeUpdate.selectAll(*)            .style(fill-opacity, 1);        nodeUpdate.select(rect)            .style(fill, function(d) {                return statusColor(d.status);            });        // <magic>//        nodeUpdate.select(.toggle-expand);        // </magic>        // Transition exiting nodes to the parent's new position.        var nodeExit = node.exit().transition()            .duration(duration)            .attr(transform, function () {                return translate( + source.x + , + source.y + );            })            .remove();        nodeExit.selectAll(*)            .style(fill-opacity, 1e-6);        nodeExit.selectAll(circle)            .style(stroke-opacity, 1e-6);        // Stash the old positions for transition.        nodes.forEach(function (d) {            d.x0 = d.x;            d.y0 = d.y;        });    };    this.updateRoot = function(strRoot) {        self.root = JSON.parse(strRoot);        self.root.x0 = 0;        self.root.y0 = 0;        update(self.root);    }};You can see it in action here: http://jsfiddle.net/jg0h24hr/1/As you may notice on jsfiddle, if you wait 3 seconds the tree is updated but then, the node won't expand / reduce anymore when you click on their bottom right icon. However if I uncomment the magical line of code (line 154 on jsfiddle), then it works correctly. So I suspect either a misconception in my code, or maybe a bug in D3.js? Any idea about that?Maybe there's some underlying invalid cached data in D3, that gets refreshed when calling d3.select ?
JS component for displaying tree with weird behaviour
javascript;d3.js