You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.0 KiB
122 lines
3.0 KiB
/**
|
|
*
|
|
*/
|
|
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()
|
|
|