|
// currently just not resetting parent after swap at the end of chain of stuff |
|
// a zero in there seems like it breaks things |
|
|
|
// var d3 = require('d3') |
|
// This will make a heap node by node in a nice animation type thing. |
|
|
|
var arr = [ 99, |
|
94, |
|
81, |
|
75, |
|
86, |
|
98, |
|
98, |
|
34, |
|
52, |
|
28, |
|
35, |
|
33, 0, 22]// 15, 4, 6 , 1 ,23 ]//, 21, 30, 21, 40, 292, 32, 49] |
|
|
|
|
|
arr = makeRandArray(15) |
|
|
|
var duration = 500; // 700 a good moderate speed |
|
var colorduration = 100; |
|
var textTransDuration = 700; |
|
var swapDelay = 500; |
|
var textRemoveDuration = 3000; |
|
var swapDelay = 1000; |
|
var compareDuration = 3000; |
|
var addColorDuration = 1000; |
|
|
|
var margin = {top: 50, right: 90, bottom: 30, left: 90}, |
|
width = 960 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", width + margin.right + margin.left) |
|
.attr("height", height + margin.top + margin.bottom) |
|
|
|
var textSpacing = 40; |
|
var arrtext = svg.append("g").attr("class", 'arrtext') |
|
|
|
arrtext |
|
.append('text').text('[') |
|
.attr('transform', 'translate(10,20)'); |
|
|
|
var arrtextg = arrtext.selectAll('.eletext').data(arr).enter().append('g') |
|
.attr('id', function(d,i){ |
|
return ("artextg" + i); |
|
}) |
|
.attr('transform', function(d,i){ |
|
var xtran = i * textSpacing + 20; |
|
var ytran = 20; |
|
return "translate(" + xtran + ', ' + ytran + ')'; |
|
}) |
|
.attr('x', function(d, i){ |
|
var xtran = i * textSpacing + 20; |
|
return xtran |
|
}) |
|
|
|
arrtextg.append('rect', ':first-child') |
|
.attr('width', function(d, i){ |
|
// console.log('this = ', this, 'd = ', d) |
|
return 20 |
|
}) |
|
.attr('height', 20) |
|
.attr('transform', 'translate(0, -15)') |
|
.attr('fill', 'none') |
|
.attr('opacity', .4) |
|
// .transition(duration * 100) |
|
// .attr('fill', 'white') |
|
|
|
arrtextg.append('text') |
|
.text(function(d, i){ |
|
// console.log(d, i, arr.length); |
|
return (i === arr.length-1) ? d : (d + ', '); |
|
}) |
|
.attr('class', 'eletext') |
|
.attr('id', function(d, i){ |
|
return 'arrText' + i; |
|
}) |
|
.attr('stroke', 'grey') |
|
.attr('fill', 'black') |
|
|
|
|
|
arrtext.append('text').text(']') |
|
.attr('transform', 'translate(' + ( (arr.length +1) * textSpacing ) + ',20)'); |
|
|
|
arrtextg.attr('textbox', function(d){ |
|
// console.log('this arrtext = ', d3.select(this).select('text').node().getBBox().width) |
|
var textW = d3.select(this).select('text').node().getBBox().width |
|
d3.select(this).select('rect').attr('width', textW ) |
|
return d3.select(this).select('text').node().getBBox().width; |
|
}) |
|
|
|
|
|
var g = svg.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
|
|
// declares a tree layout and assigns the size |
|
var treemap = d3.tree() |
|
.size([width, height]); |
|
|
|
var newsource = {name: arr[0], children: getChildren(0, arr) } |
|
|
|
console.log(newsource); |
|
|
|
var root = d3.hierarchy(newsource, function(d) { return d.children; }); |
|
|
|
root.x0 = 5; |
|
root.y0 = 0; |
|
|
|
// Make the root and all it's children null and move into _children attribute |
|
collapse(root) |
|
update(root); |
|
runprom(root); |
|
|
|
function runprom(dat) { |
|
promun(dat) |
|
.then(function(d){ |
|
var nodescendants = true; |
|
// console.log('finished the promise', d.descendants()) |
|
for( i of root.descendants() ) { |
|
// console.log(i) |
|
if( i._children ) { |
|
nodescendants = false; |
|
runprom(i) |
|
break; |
|
} |
|
} |
|
if(nodescendants === true) { |
|
// console.log('done buidling heap, now to max heap') |
|
buildMaxHeap(); |
|
} |
|
}); |
|
} |
|
|
|
|
|
function promun(ino){ |
|
var innodes = ino.descendants(); |
|
return new Promise(function(res, rej){ |
|
//console.log('inpromise', ino) |
|
unfold(ino); |
|
d3.timeout(function(){ |
|
res(ino) |
|
}, 2000); |
|
|
|
}) |
|
} |
|
|
|
function unfold(data){ |
|
//console.log('unfolding, ', data) |
|
// update(data) |
|
if( data._children ){ |
|
if( data._children.length > 0 ) { |
|
if(data.children === null ) { data.children = [] } |
|
data.children.push(data._children.shift()) |
|
if( data._children.length === 0 ) { |
|
data._children = null; |
|
} |
|
} |
|
|
|
setTimeout(function(d){ |
|
update(data) |
|
//console.log('should try to unfold data') |
|
unfold(data) |
|
} , 400) |
|
} |
|
} |
|
|
|
|
|
function getChildren(i, array) { |
|
var childs = []; |
|
var nextIndex = i * 2 + 1; |
|
if( typeof( array[ i * 2 + 1 ] ) ==="number" ) { |
|
childs[0] = { name: array[i * 2 + 1], children: [] }; |
|
if( typeof(array[ i * 2 + 2 ]) ==="number" ) { |
|
childs[1] = { name: array[ i * 2 + 2] }; |
|
} |
|
} |
|
|
|
if( typeof(arr[nextIndex *2 + 1]) === "number" ) { |
|
childs[0].children = getChildren( nextIndex, array) |
|
childs[0]._children = null; |
|
|
|
if( typeof(arr[nextIndex*2 + 2]) === "number" ){ |
|
childs[1].children = getChildren(nextIndex + 1, array); |
|
childs[1]._children = null; |
|
} |
|
} |
|
|
|
return childs |
|
} |
|
|
|
var nodes; |
|
function update(data) { |
|
//console.log(data) |
|
// var mapData = data.map() |
|
|
|
var treeData = treemap(root); |
|
nodes = treeData.descendants(); |
|
|
|
var links = treeData.descendants().slice(1); |
|
// console.log(nodes); |
|
// console.log("nodes = ", nodes, ", links = ", links); |
|
|
|
var node = g.selectAll('g.node') |
|
.data(nodes, function(d, i) { |
|
return d.id = i; |
|
}) |
|
|
|
// console.log('node = ', node) |
|
|
|
var nodeEnter = node.enter().append('g') |
|
.attr('class', 'node') |
|
.attr('transform', function(d) { |
|
// console.log('appending a new node', d); |
|
d3.select('#artextg' + d.id) |
|
.call(function(d){ |
|
// console.log('this is', this, d) |
|
d.select('rect') |
|
.attr('fill', 'red') |
|
.transition() |
|
.duration(duration*2) |
|
.attr('fill', 'white') |
|
}) |
|
|
|
return 'translate( ' + data.x0 + ', ' + data.y0 + ' )'; |
|
}) |
|
.attr('id', function(d, i) { |
|
return 'nodey' + i; |
|
}) |
|
.attr('index', function(d,i){ |
|
return i; |
|
}) |
|
|
|
|
|
nodeEnter.append('circle') |
|
.attr('class', 'node') |
|
.attr('r', 1e-6) |
|
.style('fill', function(d){ |
|
return "red" //d._children ? "lightsteelblue" : "#fff"; |
|
}) |
|
|
|
// Labels for the nodes |
|
nodeEnter.append('text') |
|
.attr("dy", ".35em") |
|
.attr("y", function(d, i){ |
|
return -15 |
|
}) |
|
.attr("x", function(d, i) { |
|
var xmove = i%2; |
|
return xmove ? -16 : 3 //d.children || d._children ? 1 : 1; |
|
}) |
|
.attr("text-anchor", function(d,i) { |
|
var xmove = i%2; |
|
return xmove ? "end" : "start"; //d.children || d._children ? "end" : "start"; |
|
}) |
|
.attr("class", "valtext") |
|
.text(function(d) { |
|
return d.data.name; |
|
}); |
|
|
|
// UPDATE |
|
var nodeUpdate = nodeEnter.merge(node) |
|
.transition() |
|
.duration(duration) |
|
// .text(function(d) { return d.data.name; }) |
|
.attr('transform', function(d){ |
|
return "translate(" + d.x + "," + d.y + ")" |
|
}) |
|
.on('end', function(d){ |
|
|
|
/* |
|
nodeUpdate.select('circle.node') |
|
.transition() |
|
.duration(addColorDuration) |
|
.style("fill", function(d) { |
|
return "steelblue"//d._children ? "lightsteelblue" : "#fff"; |
|
}) |
|
*/ |
|
}) |
|
|
|
// Update the node attributes and style |
|
nodeUpdate.select('circle.node') |
|
.attr('r', 10) |
|
.attr('cursor', 'pointer') |
|
.style('stroke', 'black') |
|
.style('stroke-width', '2px') |
|
.transition() |
|
.duration(addColorDuration) |
|
.style("fill", function(d) { |
|
return "steelblue"//d._children ? "lightsteelblue" : "#fff"; |
|
}) |
|
|
|
|
|
// Remove any exiting nodes |
|
var nodeExit = node.exit().transition() |
|
.duration(duration) |
|
.attr("transform", function(d) { |
|
return "translate(" + data.x + "," + data.y + ")"; |
|
}) |
|
.remove(); |
|
|
|
// On exit reduce the node circles size to 0 |
|
nodeExit.select('circle') |
|
.attr('r', 1e-6); |
|
|
|
// On exit reduce the opacity of text labels |
|
nodeExit.select('text') |
|
.style('fill-opacity', 1e-6); |
|
|
|
// ****************** links section *************************** |
|
|
|
// Update the links... |
|
var link = g.selectAll('path.link') |
|
.data(links, function(d) { return d.id; }); |
|
|
|
// Enter any new links at the parent's previous position. |
|
var linkEnter = link.enter().insert('path', "g") |
|
// .on('click', click) |
|
.attr("class", "link") |
|
.attr('d', function(d){ |
|
var o = {y: data.y0, x: data.x0} |
|
return diagonal(o, o) |
|
}) |
|
.style('fill', 'none') |
|
.style('stroke', 'black'); |
|
|
|
// UPDATE |
|
var linkUpdate = linkEnter.merge(link); |
|
|
|
// Transition back to the parent element position |
|
linkUpdate.transition() |
|
.duration(duration) |
|
.attr('d', function(d){ return diagonal(d, d.parent) }); |
|
|
|
|
|
// Remove any exiting links |
|
var linkExit = link.exit().transition() |
|
.duration(duration) |
|
.attr('d', function(d) { |
|
var o = {x: data.x, y: data.y} |
|
return diagonal(o, o) |
|
}) |
|
.remove(); |
|
|
|
// Store the old positions for transition. |
|
nodes.forEach(function(d, i){ |
|
// console.log(d) |
|
d.x0 = d.x; |
|
d.y0 = d.y; |
|
}); |
|
|
|
} |
|
|
|
// Make the node and all it's children null and move into _children attribute |
|
function collapse(d) { |
|
if (d.children) { |
|
d._children = d.children; |
|
d._children.forEach(collapse); |
|
d.children = null; |
|
} |
|
} |
|
|
|
// Creates a curved (diagonal) path from parent to the child nodes |
|
// switched around all the x's and y's from orig so it's verticle |
|
function diagonal(s, d) { |
|
//console.log('in diag and s = ', s); |
|
//console.log('d = ', d) |
|
|
|
path = `M ${s.x} ${s.y} |
|
C ${(s.x + d.x) / 2} ${s.y}, |
|
${(s.x + d.x) / 2} ${d.y}, |
|
${d.x} ${d.y}` |
|
|
|
return path; |
|
|
|
} |
|
|
|
|
|
function colorAllCircsGreen() { |
|
d3.selectAll('circle') |
|
.transition() |
|
.duration(colorduration) |
|
.style('fill', 'green') |
|
} |
|
|
|
var noders; |
|
|
|
|
|
function buildMaxHeap(){ |
|
|
|
noders = d3.selectAll('g.node'); |
|
console.log('time to makeheapify', noders) |
|
var numnodes = noders._groups[0].length; |
|
|
|
var holders = {restartIndex: Math.floor((numnodes)/2)-1, bigChild:null} |
|
console.log('holders to start = ', holders) |
|
max_heapify( Math.floor((numnodes)/2)-1, holders) |
|
|
|
} |
|
|
|
|
|
function bigChildIndex(ind) { |
|
// console.log(ind); |
|
|
|
var chillies = []; |
|
if( nodes[ind] ){ |
|
chillies = nodes[ind].children; |
|
if(chillies[1]){ |
|
return ( parseInt(chillies[0].data.name) > parseInt(chillies[1].data.name) ) ? 0 : 1; |
|
} |
|
else{ |
|
return 0; |
|
} |
|
} |
|
else{ |
|
return -1; |
|
} |
|
// console.log(chillies) |
|
} |
|
|
|
function max_heapify (ind, holders ){ |
|
// console.log('max heap from isnt going ', nodes[ind]) |
|
if(holders === null){ |
|
holders = {} |
|
} |
|
noders = d3.selectAll('g.node') |
|
var childindexes = [] |
|
holders.bigChild = bigChildIndex( ind ) |
|
holders.starter = ind; |
|
|
|
if(nodes[ind].children) { |
|
childindexes = nodes[ind].children.map(function(d,i){ |
|
return d.id; |
|
}) |
|
} |
|
|
|
// console.log('childindexes are', childindexes) |
|
var anode = d3.select('#nodey' + ind) |
|
|
|
changeRectColor(ind, 'red'); |
|
|
|
anode.select('circle') |
|
.transition() |
|
.duration(duration + textTransDuration) |
|
.style('fill', 'red') |
|
.on('end', function(d) { |
|
// console.log('holders', holders) |
|
compareChils(childindexes, holders) |
|
}) |
|
|
|
|
|
|
|
var comptext = 'compare the childrens'; |
|
anode.append('text') |
|
.text(comptext) |
|
.attr("text-anchor", function(d) { |
|
return 'middle'; }) |
|
.attr("dy", '20px') |
|
.attr('class', 'process') |
|
} |
|
|
|
function compareChils( childsArr, holders){ |
|
colorForComp(childsArr[0], holders); |
|
if(childsArr[1]){ |
|
colorForComp(childsArr[1], holders); |
|
} |
|
} |
|
|
|
function colorForComp( inex, holders ) { |
|
|
|
changeRectColor( inex, 'orange') |
|
|
|
d3.select('#nodey' + inex) |
|
.select('circle') |
|
.transition() |
|
.duration( duration + textRemoveDuration ) |
|
.style('fill', function(d){ |
|
return 'orange' |
|
}) |
|
.on('end', function(d){ |
|
// console.log('done and have ', d) |
|
// console.log(holders) |
|
// console.log(nodes[holders.restartIndex].children[holders.bigChild]) |
|
if(nodes[holders.starter].children[holders.bigChild] === d){ |
|
// console.log('its the big child need to check swaping') |
|
|
|
changeRectColor( inex, 'yellow') |
|
|
|
d3.select(this).transition() |
|
.duration(duration+200) |
|
.style('fill','yellow') |
|
.on('end', function(){ |
|
checkParentSwap(d, holders); |
|
}) |
|
} |
|
else{ |
|
console.log('this should make it green') |
|
|
|
d3.select(this) |
|
.transition() |
|
.duration(colorduration) |
|
.style('fill','green') |
|
changeRectColor( inex, 'green') |
|
} |
|
}) |
|
} |
|
|
|
function checkParentSwap(d, holders) { |
|
// check if the given thing is bigger than the parent node |
|
// and if not decrement holders.restartIndex and call the max heap thing with that |
|
//console.log("d = " , d) |
|
var childer = d; |
|
var cnode = d3.select('#nodey' + (d.id)); |
|
var pnode = d3.select('#nodey' + (d.parent.id)); |
|
|
|
console.log('parent node id = ', pnode.attr('id')) |
|
|
|
d3.select('.process').text('Compare with largest child') |
|
|
|
|
|
if(d.data.name > d.parent.data.name){ |
|
d3.select('.process').text('Compare with largest child') |
|
.transition() |
|
.duration(compareDuration) |
|
.delay(swapDelay) |
|
.text("swap with big child") |
|
.on('end', function(d){ |
|
// console.log('swap with parent ', childer, holders); |
|
// changeRectColor(pnode.attr('id').slice(pnode.attr('id').length-1), 'green'); |
|
swapWithParent(childer, holders) |
|
}) |
|
.on('interrupt', function(d){ |
|
// console.log('swap with parent ', childer, holders); |
|
swapWithParent(childer, holders) |
|
}) |
|
.remove(); |
|
|
|
} |
|
else{ |
|
console.log('making stuff greenie') |
|
cnode.select('circle') |
|
.transition() |
|
.duration(colorduration) |
|
.style("fill", 'green') |
|
.on('end', function(){ |
|
console.log('maybe i should do stuff here') |
|
}) |
|
changeRectColor(cnode.attr('index'), 'green'); |
|
changeRectColor(pnode.attr('index'), 'green'); |
|
|
|
d3.select('.process').text('This node is good move on') |
|
.call(function(){ |
|
console.log('trying to just make the rects green', pnode) |
|
setTimeout(function(){ |
|
|
|
console.log('why dont the rects turn green', cnode.attr('id').slice(cnode.attr('id').length-1)) |
|
// changeRectColor(pnode.attr('id').slice(pnode.attr('id').length-1), 'green'); |
|
// changeRectColor(cnode.attr('id').slice(cnode.attr('id').length-1), 'green'); |
|
|
|
}, 700) |
|
|
|
} |
|
) |
|
.transition() |
|
.duration(3000) |
|
.delay(2000) |
|
.remove(); |
|
|
|
if(holders.restartIndex > 0){ |
|
// console.log('need to color stuff here', pnode) |
|
changeRectColor(pnode.attr('id'), 'green'); |
|
|
|
|
|
pnode.select('circle') |
|
.transition() |
|
.duration(3000) |
|
.style("fill", 'green') |
|
|
|
|
|
// console.log('we get to recur!!!') |
|
holders.restartIndex = holders.restartIndex - 1; |
|
max_heapify(holders.restartIndex, holders) |
|
} |
|
else{ |
|
// colorAllCircsGreen(); |
|
changeRectColor(pnode.attr('id'), 'green'); |
|
console.log('its all over') |
|
changeRectColor(pnode.attr('id'), 'green'); |
|
popLargest(); |
|
} |
|
} |
|
} |
|
|
|
|
|
function swapWithParent(bigchild, holders){ |
|
|
|
var newLowval = bigchild.parent.data.name; |
|
bigchild.parent.data.name = bigchild.data.name; |
|
bigchild.data.name = newLowval; |
|
|
|
console.log(bigchild.id, 'and we got', bigchild.parent.id) |
|
swapArrayGs(bigchild.parent.id, bigchild.id) |
|
|
|
|
|
var parnode = d3.select('#nodey' + (bigchild.parent.id) ) |
|
parnode |
|
.select('circle') |
|
.transition() |
|
.duration(duration+2000) |
|
.style('fill','green') |
|
.on('end', function(){ |
|
|
|
parnode.select('.process') |
|
.transition() |
|
.delay(1000) |
|
.remove(); |
|
|
|
changeRectColor( bigchild.parent.id, 'green') |
|
}) |
|
|
|
var partext = parnode.select('.valtext'); |
|
// console.log(partext) |
|
partext |
|
.transition() |
|
.duration(textTransDuration) |
|
.attr('transform', function(d){ |
|
// console.log('need to translate, ', d) |
|
return "translate(" + ( d.children[holders.bigChild].x -d.x) + ', ' + (d.children[holders.bigChild].y - d.y )+ ')' |
|
}) |
|
.on('end', function(d){ |
|
changeRectColor( bigchild.parent.id, 'green') |
|
|
|
d3.select(this).attr('transform', function(d){ |
|
// console.log('trying to put it back', this, d) |
|
return 'translate(0,0)' |
|
}) |
|
.text('') |
|
}) |
|
|
|
|
|
var chinode = d3.select('#nodey' + (bigchild.id )); |
|
|
|
var chitext = chinode.select('.valtext'); |
|
chitext.transition() |
|
.duration(textTransDuration) |
|
.attr('transform', function(d){ |
|
//console.log('its this.x =', d3.select(this).attr('x')) |
|
return "translate(" + (d.parent.x - d.x- d3.select(this).attr('x')) + ', ' + (d.parent.y - d.y )+ ')' |
|
}) |
|
.on('end', function(d){ |
|
d3.select(this).attr('transform', function(d){ |
|
// console.log('trying to put it back', this, d) |
|
return 'translate(0,0)' |
|
}) |
|
.text('') |
|
}) |
|
|
|
chinode.select('circle').transition() |
|
.duration(duration) |
|
.style('fill','red') |
|
.on('end', function(d){ |
|
// console.log('need to do stuff with ', d) |
|
|
|
chinode.append('text') |
|
.attr('class', 'process') |
|
.text(function(d){ |
|
console.log(d) |
|
console.log('and the holders', holders) |
|
if(d.children){ |
|
console.log('need to keep ballancing') |
|
if(d.children.length >0){ |
|
console.log('trying to maxheap with ', holders, d) |
|
changeRectColor(bigchild.index, 'red'); |
|
max_heapify(parseInt(d.id), holders) |
|
} |
|
else{ |
|
console.log('in the wierd stpot moving on with the', holders) |
|
console.log('make all circs white fill still') |
|
chinode.select('circle').transition() |
|
.duration(100) |
|
.style('fill','green') |
|
|
|
changeRectColor(bigchild.attr('index'), 'green'); |
|
|
|
holders.restartIndex = holders.restartIndex - 1; |
|
max_heapify(holders.restartIndex, holders) |
|
} |
|
} |
|
else{ |
|
// console.log('move on with the', holders) |
|
// console.log('rect not turning green, chinodeid = ', chinode.attr('id')) |
|
chinode.select('circle').transition() |
|
.duration(10) |
|
.style('fill','green') |
|
|
|
changeRectColor(bigchild.id, 'green'); |
|
|
|
if(holders.restartIndex > 0){ |
|
holders.restartIndex = holders.restartIndex - 1; |
|
max_heapify(holders.restartIndex, holders) |
|
} |
|
else{ |
|
console.log('endgame spot, done with it all') |
|
changeRectColor(chinode.attr('id'), 'green'); |
|
|
|
popLargest(); |
|
// colorAllCircsGreen(); |
|
} |
|
} |
|
|
|
return "Check for children"; |
|
|
|
}) |
|
.attr("text-anchor", function(d) { |
|
return 'middle'; }) |
|
.attr("dy", '-20px') |
|
.transition() |
|
.duration(textRemoveDuration) |
|
.delay(1000) |
|
.style('fill', 'green') |
|
.remove(); |
|
}) |
|
parnode.select('.process').remove(); |
|
upDateNodeVals() |
|
|
|
} |
|
|
|
function upDateNodeVals() { |
|
|
|
d3.selectAll('g.node') |
|
.transition() |
|
.delay(swapDelay) |
|
.select('text') |
|
.text(function(d){ |
|
//console.log('need to change all the texts', d) |
|
return d.data.name |
|
}) |
|
|
|
} |
|
|
|
// a function to add a colored rectange to go behind the text in the array. |
|
|
|
function changeRectColor(index, color) { |
|
|
|
d3.select('#artextg'+index).select('rect') |
|
.transition().duration(duration) |
|
.attr('fill', color) |
|
|
|
// console.log('need to remove or change color of recs at right time still') |
|
} |
|
|
|
// Will swap the elements in the array at the top of the page. |
|
// Just give the indexes of the elements you wish to swap. |
|
function swapArrayGs(ind1, ind2) { |
|
|
|
var g1 = d3.select('#artextg' + ind1) |
|
var gx1 = g1.attr('x') |
|
var g2 = d3.select('#artextg' + ind2) |
|
var gx2 = g2.attr('x') |
|
var g1Start = g1.select('text').text(); |
|
var g2Start = g2.select('text').text() |
|
|
|
// console.log('startiing val ', g1Start) |
|
var xdis = gx2 - gx1 |
|
|
|
g1.select('text').transition() |
|
.duration(duration) |
|
.attr("transform", "translate(" + xdis + ', 0)') |
|
.on('end', function(d,i){ |
|
// console.log('d = ', d, 'this = ???', this) |
|
g1.select('text').attr('transform','translate(0, 0)').text(g2Start); |
|
}) |
|
|
|
g2.select('text').transition() |
|
.duration(duration) |
|
.attr("transform", "translate(" + (-xdis) + ', 0)') |
|
.on('end', function(d,i){ |
|
// console.log('d = ', d, 'this = ???', this) |
|
g2.select('text').attr('transform','translate(0, 0)').text(g1Start); |
|
updateRectSizes(); |
|
}) |
|
} |
|
|
|
|
|
function updateRectSizes(){ |
|
arrtextg.attr('textbox', function(d){ |
|
// console.log('this arrtext = ', d3.select(this).select('text').node().getBBox().width) |
|
var textW = d3.select(this).select('text').node().getBBox().width |
|
d3.select(this).select('rect').attr('width', textW ) |
|
return d3.select(this).select('text').node().getBBox().width; |
|
}) |
|
} |
|
|
|
|
|
// Should take the top element in the heap and swap it with the last one, |
|
// then the heap should get reballanced |
|
function popLargest(){ |
|
console.log('done heaping now need to start sorting, should show swapping first and last elements of the array') |
|
|
|
//console.log('need to update nodes = ', nodes) |
|
// swap first with last node |
|
var topper = d3.select('#nodey' + nodes[0].id) |
|
|
|
var highval = nodes[0].data.name |
|
|
|
var lower = d3.select('#nodey' + nodes[nodes.length-1].id) |
|
var lowval = nodes[nodes.length-1].data.name |
|
|
|
// console.log('lowval is', lowval) |
|
var toptransX = nodes[0].x - nodes[nodes.length-1].x |
|
var toptransY = nodes[nodes.length-1].y -nodes[0].y |
|
|
|
// console.log(toptransX, 'and y= ', toptransY) |
|
topper.select('.valtext') |
|
.transition() |
|
.attr('transform', "translate(" + toptransX + ", " + toptransY +')') |
|
.on('end', function(){ |
|
//nodes[0].data.name = lowval; |
|
//nodes[nodes.length-1].data.name = highval; |
|
// console.log('and this is', this) |
|
d3.select(this).attr('transform', 'translate(0,0)') |
|
|
|
// upDateNodeVals() |
|
}) |
|
|
|
nodes[0].data.name = lowval; |
|
nodes[nodes.length-1].data.name = highval; |
|
|
|
swapArrayGs(0, nodes.length-1) |
|
|
|
MakeRectDone(nodes.length-1, 'blue') |
|
|
|
lower.select('circle') |
|
.transition() |
|
.delay(1000) |
|
.duration(colorduration) |
|
.style('fill', 'blue') |
|
.on('end', function(d){ |
|
var lastpar = nodes[nodes.length-1].parent; |
|
lastpar._children = nodes[nodes.length-1]; |
|
// console.log(lastpar, "last parent is") |
|
var removableindex = lastpar.children.indexOf(nodes[nodes.length-1]); |
|
lastpar.children = lastpar.children.filter(function(d){ |
|
return d !== nodes[nodes.length-1] |
|
}) |
|
if(lastpar.children.length === 0){ |
|
lastpar.children = null; |
|
} |
|
update(lastpar) |
|
// console.log('nodes after all that,', nodes) |
|
setTimeout(function(){ |
|
if(nodes.length === 1){ |
|
console.log('All done just need to make this rectangle blue and maybe make the root go to the array.') |
|
MakeRectDone(0, 'blue') |
|
} |
|
else{ |
|
max_heapify(0, {}) |
|
} |
|
|
|
}, 2000) |
|
|
|
}) |
|
|
|
// console.log('want to make this blue') |
|
|
|
lower.select('.valtext') |
|
.transition() |
|
.attr('transform', "translate(" + -toptransX + ", " + -toptransY +')') |
|
.on('end', function(){ |
|
//nodes[0].data.name = lowval; |
|
// console.log('and this is', this) |
|
d3.select(this).attr('transform', 'translate(0,0)') |
|
|
|
upDateNodeVals() |
|
}) |
|
|
|
} |
|
|
|
|
|
function MakeRectDone(i){ |
|
d3.select('#artextg'+i).select('rect') |
|
.transition().duration(duration) |
|
.attr('fill', 'none') |
|
.attr('stroke', "steelblue") |
|
|
|
} |
|
|
|
function makeRandArray(length){ |
|
var arrRand = []; |
|
for(i = 0; i < length; i++){ |
|
arrRand.push(Math.floor(Math.random()*100)) |
|
} |
|
return arrRand |
|
} |
