/** * */ Visualizer.prototype.swap = function(delay, indexA, indexB) { // NOTE Two way binding here between dataset and function parameter? // NOTE swapping will not reorder index and i parameter will be off // NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997 this.groups .transition().duration(delay) .attr('transform', function doTransform(d) { if (d.index === indexA) { d.index = indexB; } else if (d.index === indexB) { d.index = indexA; } return `translate(${Visualizer.calculateX(d.index)}, ${Visualizer.itemY})`; }); }; /** * Highlights a range of indices with a color. End index and color optional. */ Visualizer.prototype.highlight = function(delay, startIndex, endIndex, color) { if (endIndex === undefined) { endIndex = startIndex; } if (color === undefined) { color = 'orangered'; } this.groups.each(function(d, i) { if (d.index >= startIndex && d.index <= endIndex) { d3.select(this).select('rect').attr('fill', color); } }); }; /** * Un-highlights an index. */ Visualizer.prototype.unhighlight = function() { // this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; }); this.svg.selectAll('.item').attr('fill', '#1A45AC'); }; /** * Greys out an item. */ Visualizer.prototype.fade = function(delay, startIndex, endIndex) { this.groups.each(function(d) { if (d.index >= startIndex && d.index <= endIndex) { d3.select(this).style('opacity', '0.2'); } }); }; /** * Restores all items to un-greyed state. */ Visualizer.prototype.unfade = function() { this.groups.each(function(d) { d3.select(this).style('opacity', 1); }); }; /** * Message updates. */ Visualizer.prototype.message = function(delay, which, msg) { var msg = msg || ' '; this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg; }; /** * */ Visualizer.prototype.item = function(delay, classname, x, y, text, color) { var g = this.svg.append('g') .attr('class', classname) .attr('transform', `translate(${x}, ${y})`); g.append('rect').attr('width', Visualizer.itemW) .attr('height', Visualizer.itemH) .attr('fill', color); g.append('text').text(text) .attr('fill', '#aaa') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('transform', function doTransform(d) { return `rotate(90 0,0), translate(5, -3)`; }); }; /** * */ Visualizer.prototype.removeSecondary = function() { this.svg.selectAll('.secondary').remove(); }; /** * */ Visualizer.prototype.removeTertiary = function() { this.svg.selectAll('.tertiary').remove(); }; /** * */ Visualizer.prototype.remove = function(delay, id) { this.svg.select(`#${id}`).remove(); }; /** * */ // Visualizer.prototype.move = function()