cluster force problem

by Sajeetharan Sinnathurai

HTML

<div id="chart"></div>

CSS

<style> circle.node {
        cursor: pointer;
        stroke: #3182bd;
        stroke-width: 1.5px;
    }
    path.link {
        fill: none;
        stroke: #666;
        stroke-width: 1.5px;
    }
    .simpleDiv {
        position: absolute;
        overflow: visible;
    }
    .simpleDiv .mainDiv {
        overflow: visible;
        width: 100%;
    }
    .simpleDiv .mainDiv .childImage {
        width: 30px;
        height: 30px;
        border: 2px solid;
        border-radius: 30px;
        overflow: hidden;
    }
    .simpleDiv .mainDiv .userImage {
        width: 50px;
        height: 50px;
        border: 2px solid;
        border-radius: 30px;
        overflow: hidden;
    }
    .simpleDiv .mainDiv .docIcon {
        width: 50px;
    }
    .simpleDiv .mainDiv .content {
        margin-left: 45px;
        margin-top: -30px;
    }
    #hiddenText {
        visibility: hidden;
        padding: 0;
    }
    </style>

JavaScript

var w = 650,
        h = 600,
        node,
        path,
        root, nodes, links;

    var force, vis;
    var LoadData = true;
    loadImage();
    var tooltip = d3.select("#chart")
        .append("div")
        .attr("class", "my-tooltip")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden");
    tooltip.append("div")
        .attr("id", "tt-name")
        .text("simple");
    tooltip.append("div")
        .attr("id", "tt-size")
        .text("simple");

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

        force.nodes(nodes)
            .links(links)
            .linkDistance(120)
            .charge(-500)
            .start();

        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)");
        vis.selectAll(".node .simpleDiv").remove();

        node = vis.selectAll(".node");
        node = node.data(force.nodes());
        node.exit().remove();
        node.enter().append("g")
            .attr("class", "node")
            .on("click", click).on("mouseover", function (d) { 
            tooltip.select("#tt-name").text(d.name)
            tooltip.select("#tt-size").text(d.size)
            return tooltip.style("visibility", "visible");
        })
            .on("mousemove", function () {
            return tooltip.style("top", (d3.event.pageY - 130) + "px").style("left", (d3.event.pageX - 130) + "px");
        })
            .on("mouseout", function () {
            return tooltip.style("visibility", "hidden");
        });




        node.append("foreignObject")
            .attr("class", "simpleDiv")
            .attr("width", function (d) {
            var f = document.createElement("span");
            f.id = "hiddenText";
          ...