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.
99 lines
2.5 KiB
99 lines
2.5 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 an index.
|
|
*/
|
|
Visualizer.prototype.highlight = function(delay, index) {
|
|
if (index < 0) {
|
|
console.error('Trying to highlight index of ' + index);
|
|
return;
|
|
}
|
|
|
|
this.groups.each(function(d, i) {
|
|
if (d.index === index) {
|
|
d3.select(this).select('rect').attr('fill', 'orangered')
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Un-highlights an index.
|
|
*/
|
|
Visualizer.prototype.unhighlight = function() {
|
|
this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; });
|
|
};
|
|
|
|
/**
|
|
* 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);
|
|
});
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.hideMarker = function(delay, which) {
|
|
this.svg.select(`#marker${which}`).attr('style', 'display:none');
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.showMarker = function(delay, which) {
|
|
this.svg.select(`#marker${which}`).attr('style', 'display:block');
|
|
};
|
|
|
|
/**
|
|
* Marker movement.
|
|
*/
|
|
Visualizer.prototype.marker = function(delay, which, index, label) {
|
|
if (label !== undefined) {
|
|
label = label[0].toString();
|
|
this.svg.select(`#marker${which} text`).text(label)
|
|
}
|
|
|
|
this.svg.select(`#marker${which}`)
|
|
.transition().duration(delay)
|
|
.attr('transform', `translate(${Visualizer.calculateX(index)},${Visualizer.spacerW})`)
|
|
};
|
|
|
|
/**
|
|
* Message updates.
|
|
*/
|
|
Visualizer.prototype.message = function(delay, which, msg) {
|
|
var msg = msg || ' ';
|
|
this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg;
|
|
};
|
|
|