阻止子节点在页面加载时“弹出”（D3.js）

Question

我有以下D3代码来展示这个视觉效果：

黄色节点之后的孩子（单词）＆＃39; pop＆＃39;页面加载时输出。但我只希望视觉在页面加载时显示黄色节点，并仅在用户点击黄色节点时显示单词。目前你可以崩溃和弹出＆＃39;黄色节点点击它们是完美的......我只是不希望黄色节点在页面加载时显示单词。

    < script type = "text/javascript" >

    var w = 1100,
        h = 600,
        node,
        path,
        root, nodes, links, rootNode, id = 19;

var force, vis;
var LoadData = true;


function update() {
    if (force) force.stop();
    nodes = flatten(root);
    links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force
        .nodes(nodes)
        .links(links)
        .linkDistance(100)
        .charge(-1500)
        .theta(1)
        .gravity(0.03)
        .start();


    vis.selectAll("path").remove();
    vis.selectAll(".node").remove();

    path = vis.selectAll("path.link");
    path = path.data(force.links());
    path.exit().remove();
    path
        .enter().append("svg:path")
        .attr("class", "link")
        .attr("marker-end", "url(#end)");

    node = vis.selectAll(".node");
    node = node.data(force.nodes());
    node.exit().remove();
    node
        .enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .call(force.drag);

    node.append("image")
        .attr("xlink:href", function(d) {
            return d.imageURL;
        }) //http://t2.gstatic.//com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX";})
        .attr("class", "image")
        .attr("x", -20)
        .attr("y", -20)
        .attr("width", 42)
        .attr("height", 42);

    node.append("text")
        .attr("class", "text")
        .attr("x", 15)
        .attr("dy", ".35em")
        .style("fill", color)
        .text(function(d) {
            return d.name;
        });
}



function tick() {
    path.attr("d", function(d) {

        if (d.source.id == rootNode.id) {
            d.source.x = (w / 2 - 15);
            d.source.y = (h / 2 - 15);
        }

        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" +
            d.source.x + "," +
            d.source.y + "A" +
            dr + "," + dr + " 0 0,1 " +
            d.target.x + "," +
            d.target.y;
    });

    node.attr("transform", function(d) {

        if (d.id == rootNode.id) {
            return "translate(" + ((w / 2) - 20) + "," + ((h / 2) - 20) + ")";
        }
        return "translate(" + d.x + "," + d.y + ")";
    });

}

function color(d) {
    return d._children ? "#778899" : d.children ? "#778899" : "#778899";
}

// Toggle children on click.
function click(d) {

    if ((d.children != null || d.children != undefined) || (d._children != null || d._children != undefined)) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update();
    }

}


var findNode = function(node) {
    for (var i in force.nodes()) {
        if (force.nodes()[i] === node) return true
    };
    return false;
}

// Returns a list of all nodes under the root.
function flatten(root) {
    var nodes = [],
        i = 0;

    function recurse(node) {
        if (node.children) node.children.forEach(recurse);
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }

    rootNode = root;
    recurse(root);

    return nodes;
}


function loadImage() {
    if (LoadData) {

        force = d3.layout.force()
            .on("tick", tick)
            .size([w, h]);

        vis = d3.select("#chart").append("svg:svg")
            .attr("width", w)
            .attr("height", h);
        update();
        LoadData = false;
    }
}