Fire JS Bin - duc01

var data = {"id": "17", "name": "ROOT", "layer": "0", "current": "true", "children": [
        {"id": "18", "name": "A-child-with-a-long-name", "warning": "true", "layer": "1", "children": [
                {"id": "19", "name": "A1", "layer": "2"},
                {"id": "20", "name": "A2", "warning": "true","layer": "2", "children": [
                  
{"id": "21", "name": "", type: 1, order: 1, html: '<div class="box" tabindex="1"><h3>Question ???</h3>    </div>', "layer": "3"},

{"id": "22", "name": "-", type: 2, order: 1, html: '<span class="answer" tabindex="11"><input type="radio"> Yes</span>', "layer": "3", "children": [
    {"id": "221", "name": "-", "layer": "4", type: 1, order: 1, html: '<div class="box" tabindex="20"><h3>Question AAA</h3>    </div>'},
    {"id": "222", "name": "-", "layer": "4", type: 2, order: 1, html: '<span class="answer">111111111-A</span>'},
    {"id": "223", "name": "-", "layer": "4", type: 2, order: 2, html: '<span class="answer">111111111-    B</span>'},
    {"id": "224", "name": "-", "layer": "4", type: 2, order: 3, html: '<span class="answer">111111111-C</span>'}
] }

,{"id": "23", "name": "-", type: 2, order: 2, html: '<span class="answer" tabindex="12"><input type="radio"> No</span>', "layer": "3", "children": [
                                {"id": "231", "name": "-", "layer": "4", type: 1, order: 2, html: '<div class="box" tabindex="30"><h3>Question BBB</h3>    </div>'},
                                {"id": "232", "name": "-", "layer": "4", type: 2, order: 1, html: '<span class="answer">22222222</span>'}
                            ]}

,{"id": "24", "name": "-", type: 2, order: 3, html: '<span class="answer" tabindex="13"><input type="radio"> Unknown</span>', "layer": "3", "children": [
                                {"id": "241", "name": "-", "layer": "4", type: 1, order: 3, html: '<div class="box" tabindex="40"><h3>Question CCC</h3>    </div>'},
                                {"id": "242", "name": "-", "layer": "4", type: 2, order: 1, html: '<span class="answer">3333333</span>'}
                            ]}

]}
            ]},
        {"id": "28", "name": "B", "layer": "1"},
        {"id": "29", "name": "C", "layer": "1", "children": [
                {"id": "30", "name": "C1", "layer": "2"},
                {"id": "31", "name": "C2", "layer": "2", "children": [
                        {"id": "32", "name": "C21", "layer": "3"},
                        {"id": "33", "name": "C22", "layer": "3"},
                        {"id": "34", "name": "C23", "layer": "3"}
                    ]}
            ]}
    ]};

var customNodes = new Array(),
        tmpNodes,
        label_w = 70,
        branch_w = 70,
        layer_wider_label = new Array(),
        depencencyChart;

function initDependencyChart() {
        tmpNodes = d3.layout.tree().size([500, 400]).nodes(data);
// Create a svg canvas
    depencencyChart = d3.select("#depencency-chart").append("svg:svg")
            .attr("width", 1200)
            .attr("height", 800)
            .append("svg:g")
            .attr("transform", "translate(40, 30)"); // shift everything to the right
  
    var fakeTxtBox = depencencyChart.append("svg:text")
            .attr("id", "fakeTXT")
            .attr("text-anchor", "right")
            .text(data.name);
    layer_wider_label[0] = fakeTxtBox.node().getComputedTextLength();
    depencencyChart.select("#fakeTXT").remove();
  
    data.y = getNodeY(data.id);
    data.x = 0;
    data.depth = parseInt(data.layer);
    customNodes.push(data);
    prepareNodes(data.children);
    //align nodes.
    updateNodesXOffset();
    drawChart();
}

var map = {}, lastNodesChildrenCount = 0, lastLayer = 0;
function updateNodesXOffset(){
    var x_offsets = new Array();
    x_offsets[0] = 0;
    customNodes.forEach(function(node) {

if ( node.type == 1 ) { node.y += 120 + lastNodesChildrenCount*100; map[node.id] = node.y; lastNodesChildrenCount = node.parent.children.length-1; if (node.layer != lastLayer) lastNodesChildrenCount=0; lastLayer = node.layer; }
if ( node.type == 2 ) { var parentY = map[node.parent.children[0].id]; node.y = parentY + node.order*30 - 20; }

node.x = 0;
        if (node.layer > 0) {
            node.x = x_offsets[node.layer - 1] + layer_wider_label[node.layer - 1] + branch_w;
            x_offsets[node.layer] = node.x;
        }
    });
}

function prepareNodes(nodes) {
    nodes.forEach(function(node) {
        prepareNode(node);
        if (node.children) {
            prepareNodes(node.children);
        }
    });
}

function prepareNode(node) {
    node.y = getNodeY(node.id);

if ( node.name == '-') {
  node.name = '　　　　　　　　';
}
    //fake element to calculate labels area width.
    var fakeTxtBox = depencencyChart.append("svg:text")
            .attr("id", 'fakeTXT')
            .attr("text-anchor", "right")
            .text(node.name);

var this_label_w = fakeTxtBox.node().getComputedTextLength();
    depencencyChart.select("#fakeTXT").remove();

if (layer_wider_label[node.layer] == null) {
        layer_wider_label[node.layer] = this_label_w;
    } else {
        if (this_label_w > layer_wider_label[node.layer]) {
            layer_wider_label[node.layer] = this_label_w;
        }
    }
//                node.x = nodex;
    //x will be set
    node.depth = parseInt(node.layer);
    customNodes.push(node);
}

function customSpline(d) {
    var p = new Array();
    p[0] = d.source.x + "," + d.source.y;
    p[3] = d.target.x + "," + d.target.y;
    var m = (d.source.x + d.target.x) / 2;
    p[1] = m + "," + d.source.y;
    p[2] = m + "," + d.target.y;
    //This is to change the points where the spline is anchored
    //from [source.right,target.left] to [source.top,target.bottom]
//                var m = (d.source.y + d.target.y)/2
//                p[1] = d.source.x + "," + m;
//                p[2] = d.target.x + "," + m;
    return "M" + p[0] + "C" + p[1] + " " + p[2] + " " + p[3];
}

var showFlag = false;

var el = d3.select(elId)[0][0];

}

function drawChart() {
    customNodes.forEach(function(node) {
        var nodeSVG = depencencyChart.append("svg:g")
                .attr("transform", "translate(" + node.x + "," + node.y + ")")

//if ( node.type == 2 ) node.y -= 20;

if (node.depth > 0) {
            /*nodeSVG.append("svg:circle")
                    .attr("stroke", node.children ? "#3191c1" : "#269926")
                    .attr("fill", "#fff")
                    .attr("r", 3);*/
          
if ( node.html ) {

.on('mouseover', mh )
.on('mouseout', function() {
  //document.getElementById('a123').remove();
});
  
if ( node.type == 1 ) {
  fo.attr('questionId', node.id);
} else if ( node.type == 2 ) {
  fo.attr('questionId', node.parent.children[0].id );
}

}

var txtBox = nodeSVG.append("svg:text")
                .attr("dx", 8)
                .attr("dy", 4)
                .attr("fill", node.current ? "#fff" : node.children ? "#3191c1" : "#269926")
                .text(node.name)
.on('mouseover', mh)

var txtW = txtBox.node().getComputedTextLength();

if (node.type == 1) {
  txtBox.attr('id', 'node' + node.id);
  txtBox.attr('questionId', node.id);
} else if ( node.type == 2 ) {
  txtBox.attr('questionId', node.parent.children[0].id );
}

if ( txtBox.node().innerHTML === '-' ) {
  //txtW = 50;
}
      
        if (node.current) {
            nodeSVG.insert("rect", "text")
                    .attr("fill", node.children ? "#3191c1" : "#269926")
                    .attr("width", txtW + 8)
                    .attr("height", "20")
                    .attr("y", "-12")
                    .attr("x", "5")
                    .attr("rx", 4)
                    .attr("ry", 4)
        }
      
        if (node.children) { 
            node.x = node.x + txtW + 20;
node.y += 15;
            // prepare links;
            var links = new Array();
            node.children.forEach(function(child) {
                var st = new Object();
                st.source = node;
                // st.parent = node;
                st.target = child;
                st.warning = child.warning;
                links.push(st);
            });

var checkPath = function(path) {
  if ( path.target.type == 2 ) {
    this.remove();
  }
  return customSpline(path);
}
          
            //draw links (under nodes)
            depencencyChart.selectAll("pathlink")
                    .data(links)
                    .enter().insert("svg:path", "g")
                    .attr("class", function(d) {
                return d.warning === "true" ? "link warning" : "link"
            })
                    .attr("d", checkPath )

//draw a node at the end of the link
            nodeSVG.append("svg:circle")
                    .attr("stroke", "#3191c1")
                    .attr("fill", "#fff")
                    .attr("r", 5.5)
                    //.attr("transform", "translate(" + (txtW + 20) + ",0)");
.attr("transform", "translate(" + (txtW + 20) + ", 15)");
        } // --- end of node.children
    });
}

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.box, .box2 {
    font-family: Verdana;
    width: 150px;
    height: 150px;
    border: 1px solid darkblue;
    border-radius: 5px;
    cursor: pointer;
background-color: white;
}
.box h3, .box2 h3 {
    margin: 0; padding: 0;
    border-radius: 5px;
    background-color: #eee;
    padding: 2px;
    margin-bottom: 5px;
}
.box div {
    padding: 2px;
    padding-left: 10px;
}
.box div:hover {
    
}
.box:hover {
    
}

.answer {
    margin: 0 10px;
    display: inline-block;
    width: 130px;
height: 25px;
padding: 5px;
    cursor: pointer;
z-index: 1;
}
.answer:hover {
    background-color: #eed;
}

text { 
        -moz-user-select: none; 
        -khtml-user-select: none; 
        -webkit-user-select: none; 
        -o-user-select: none; 
cursor: default;
}

.box2 {
  width: 120px;
  height: 120px;
  border: none;
  background-color: #eee;
}