ben-burlingham
10 years ago
parent
f2891359ab
commit
b224562970
8 changed files with 329 additions and 297 deletions
@ -0,0 +1,146 @@ |
||||
/** |
||||
* |
||||
*/ |
||||
var Itemgroup = { |
||||
/** |
||||
* |
||||
*/ |
||||
items: function items(group, delay, n) { |
||||
var g; |
||||
var all = []; |
||||
|
||||
// Items start with no background by default.
|
||||
for (var i = 0; i < n; i++) { |
||||
g = group.append('g') |
||||
.attr('class', `i${i}`) |
||||
.attr('transform', function transform(d) { |
||||
return `translate(${i * (Visualizer.itemW + Visualizer.spacerW) + Visualizer.padding}, ${Visualizer.padding})`; |
||||
});; |
||||
|
||||
g.append('rect') |
||||
.attr('class', 'item') |
||||
.attr('height', Visualizer.itemH) |
||||
.attr('width', Visualizer.itemW) |
||||
.attr('fill', 'transparent'); |
||||
|
||||
// Item labels
|
||||
g.append('text') |
||||
.attr('fill', '#aaa') |
||||
.attr('font-size', 10) |
||||
.attr('font-family', 'sans-serif') |
||||
.attr('transform', function transform(d) { |
||||
return `rotate(90 0,0), translate(5, -3)`; |
||||
}); |
||||
|
||||
all.push(g); |
||||
}; |
||||
|
||||
return all; |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
swap: function swap(group, delay, indexA, indexB) { |
||||
var x, a, b; |
||||
var len = group.selectAll('g')[0].length; |
||||
|
||||
// NOTE pitfalls in the swapping problem.
|
||||
// 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
|
||||
|
||||
// Animate a node swap which will be quietly undone after completion.
|
||||
group.selectAll('g').transition().duration(delay - 100) |
||||
.attr('transform', function transform(d, i) { |
||||
x = i * (Visualizer.itemW + Visualizer.spacerW) + Visualizer.padding; |
||||
|
||||
if (i === indexA) { |
||||
x = indexB * (Visualizer.itemW + Visualizer.spacerW) + Visualizer.padding; |
||||
a = d3.select(this).select('text').text(); |
||||
} |
||||
else if (i === indexB) { |
||||
x = indexA * (Visualizer.itemW + Visualizer.spacerW) + Visualizer.padding; |
||||
b = d3.select(this).select('text').text(); |
||||
|
||||
} |
||||
|
||||
return `translate(${x}, ${Visualizer.padding})`; |
||||
}) |
||||
.each('end', function(d, i) { |
||||
if (i !== len - 1) { |
||||
return; |
||||
} |
||||
|
||||
console.log(`indexA: ${indexA}, ${a}, indexB: ${indexB}, ${b}`); |
||||
|
||||
// Undo the animation by restoring the original positions and swapping the values.
|
||||
group.selectAll('g') |
||||
.attr('transform', function transform(d, i) { |
||||
x = i * (Visualizer.itemW + Visualizer.spacerW) + Visualizer.padding; |
||||
return `translate(${x}, ${Visualizer.padding})`; |
||||
}) |
||||
.each(function(d, i) { |
||||
if (i === indexA) { |
||||
d3.select(this).select('text').text(b); |
||||
} |
||||
else if (i === indexB) { |
||||
d3.select(this).select('text').text(a); |
||||
} |
||||
}); |
||||
|
||||
console.warn(`indexA: ${indexA}, ${a}, indexB: ${indexB}, ${b}`); |
||||
}); |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
background: function background(group, delay, start, end, color) { |
||||
group.selectAll('g').each(function(d, i) { |
||||
if (i >= start && i <= end) { |
||||
d3.select(this).select('rect').attr('fill', color); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
foreground: function foreground(group, delay, start, end, color) { |
||||
group.selectAll('g').each(function(d, i) { |
||||
if (i >= start && i <= end) { |
||||
d3.select(this).select('text').attr('fill', color); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
text: function text(group, delay, which, text) { |
||||
// NOTE http://stackoverflow.com/questions/28390754/get-one-element-from-d3js-selection-by-index
|
||||
group.selectAll('g') |
||||
.filter(function filter(d, i) { return i === which; }) |
||||
.select('text').text(text); |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
opacity: function opacity(group, delay, start, end, opacity) { |
||||
group.selectAll('g').each(function(d, i) { |
||||
if (i >= start && i <= end) { |
||||
d3.select(this).attr('opacity', opacity); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
/** |
||||
* Message updates. |
||||
*/ |
||||
message: function message(group, delay, which, msg) { |
||||
var msg = msg || ' '; |
||||
this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg; |
||||
}, |
||||
}; |
||||
@ -1,122 +0,0 @@ |
||||
/** |
||||
* |
||||
*/ |
||||
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()
|
||||
Loading…
Reference in new issue