View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
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: '
Question ???
', "layer": "3"}, {"id": "22", "name": "-", type: 2, order: 1, html: '
Yes
', "layer": "3", "children": [ {"id": "221", "name": "-", "layer": "4", type: 1, order: 1, html: '
Question AAA
'}, {"id": "222", "name": "-", "layer": "4", type: 2, order: 1, html: '
111111111-A
'}, {"id": "223", "name": "-", "layer": "4", type: 2, order: 2, html: '
111111111- B
'}, {"id": "224", "name": "-", "layer": "4", type: 2, order: 3, html: '
111111111-C
'} ] } ,{"id": "23", "name": "-", type: 2, order: 2, html: '
No
', "layer": "3", "children": [ {"id": "231", "name": "-", "layer": "4", type: 1, order: 2, html: '
Question BBB
'}, {"id": "232", "name": "-", "layer": "4", type: 2, order: 1, html: '
22222222
'} ]} ,{"id": "24", "name": "-", type: 2, order: 3, html: '
Unknown
', "layer": "3", "children": [ {"id": "241", "name": "-", "layer": "4", type: 1, order: 3, html: '
Question CCC
'}, {"id": "242", "name": "-", "layer": "4", type: 2, order: 1, html: '
3333333
'} ]} ]} ]}, {"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 getNodeY(id) { var ret = 0; tmpNodes.some(function(node) { if (node.id === id) { //return x:d3.tree has a vertical layout by default. ret = node.x; return; } }); return ret; } 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 mh = function() { if ( showFlag ) return; console.log(222, event.clientX); function getScreenCoords(x, y, ctm) { var xn = ctm.e + x*ctm.a; var yn = ctm.f + y*ctm.d; return { x: xn, y: yn }; } var paras = document. getElementsByClassName('box2'); console.log(paras); while(paras && paras[0]) { paras[0].parentNode.removeChild(paras[0]); } var elId = '#node' + this.getAttribute('questionId'); var el = d3.select(elId)[0][0]; var cx = el.getAttribute('cx'); var cy = el.getAttribute('cy'); var ctm = el.getCTM(); var coords = getScreenCoords(cx, cy, ctm); showFlag = true; var e = document.createElement('div'); e.className = 'box2'; e.id = 'a123'; e.innerHTML = '
Question
Yes
No
Unknown
'; e.style.position = 'absolute'; e.style.top = coords.y - 4 + 'px'; e.style.left = coords.x + 17 + 'px'; document.body.appendChild(e); e.onmouseout = function() { var left = coords.x + 17; var top = coords.y - 4; var mx = event.clientX, my = event.clientY; if ( mx > left && mx < left+150 && my > top && my < top+120) { } else{ this.remove(); setTimeout( function() { showFlag = false; }, 10 ); } } } 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 ) { var fo = nodeSVG.append("foreignObject") .attr('width', 160) .attr('height', function(d) { return (node.type == 1 ? 170 : 30 ); }) .attr("x", function(d) { return 0; }) .attr("y", function(d) { if ( node.type === 1 ) return -15; if ( node.type === 2 ) return 0; // shift Answer Nodes up return 0; }) .append("xhtml:body") .html(function (d) { return 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; }
Pop out
Help
About
×
×