|
var DEFAULT_OPTIONS = { |
|
margin: {top: 20, right: 20, bottom: 20, left: 20} |
|
}; |
|
|
|
// create sierpinski |
|
|
|
var sierpinski = new Sierpinski(6); |
|
|
|
var chart = new d3Kit.Skeleton('.chart', DEFAULT_OPTIONS) |
|
.autoResize('both') |
|
.on('resize', onResize); |
|
|
|
var options = chart.options(); |
|
|
|
// add sierpinski to |
|
|
|
chart.getRootG() |
|
.call(sierpinski.enter); |
|
|
|
// handle resize |
|
|
|
function onResize() { |
|
var width = chart.getInnerWidth (); |
|
var height = chart.getInnerHeight(); |
|
var center = [options.margin.left + width / 2, options.margin.top + height / 2]; |
|
|
|
sierpinski.property('edgeLength', d3.min([width, height])); |
|
|
|
chart.getRootG() |
|
.attr('transform', 'translate(' + center + ')') |
|
.call(sierpinski.update); |
|
} |
|
|
|
// sierpinski chartlet |
|
|
|
function Sierpinski(depth, color) { |
|
|
|
// constants |
|
|
|
var ANGLES = d3.range(0, 360, 120).map(function(d) {return degreesToRadians(d + 30);}); |
|
var TRIANGLE = 'M P0 L P1 L P2 z'; |
|
var EDGE_RADIUS_RATIO = Math.sqrt(3) / 3; |
|
|
|
|
|
color = color || [255, 128, 128]; |
|
var events = []; |
|
var children = depth > 0 ? new Sierpinski(depth - 1) : null; |
|
|
|
var charlet = d3Kit.Chartlet(enter, update, exit, events); |
|
|
|
function enter(selection, onEnd) { |
|
|
|
// if bottom out on depth, actually add path to plot triangles |
|
|
|
if (depth == 0) { |
|
selection |
|
.append('path') |
|
.classed('triangle', true) |
|
.attr('d', function() { |
|
return createTrianglePath(0); |
|
}) |
|
.style('fill', triangleColor); |
|
} |
|
|
|
// otherwise add children |
|
|
|
else { |
|
|
|
// create 3 groups one for each child sierpinski triangle |
|
|
|
var groups = selection.selectAll('g.child') |
|
.data(ANGLES) |
|
.enter() |
|
.append('g') |
|
.classed('child', true) |
|
.attr('transform', 'translate(0, 0)'); |
|
|
|
groups.call(children.enter); |
|
} |
|
|
|
onEnd(); |
|
} |
|
|
|
function update(selection, onEnd) { |
|
|
|
var radius = charlet.getPropertyValue('edgeLength') * EDGE_RADIUS_RATIO; |
|
|
|
// if children, update those |
|
|
|
if (children) { |
|
|
|
// update done when children update is done |
|
|
|
children.on('updateDone', onEnd); |
|
|
|
selection.selectAll('g.child') |
|
.transition() |
|
.attr('transform', function(d) { |
|
var x = Math.cos(d) * radius / 2; |
|
var y = Math.sin(d) * radius / 2 + radius / 8; |
|
return 'translate(' + x + ', ' + y + ')'; |
|
}); |
|
|
|
children.property('edgeLength', charlet.getPropertyValue('edgeLength') / 2); |
|
selection.selectAll('g.child') |
|
.call(children.update); |
|
} |
|
|
|
// otherwise update the triangle |
|
|
|
else { |
|
selection.selectAll('path.triangle') |
|
.transition() |
|
.attr('d', function() { |
|
return createTrianglePath(radius); |
|
}) |
|
.each('end', onEnd); |
|
} |
|
} |
|
|
|
function exit(selection, onEnd) { |
|
onEnd(); |
|
} |
|
|
|
function triangleColor(d, i) { |
|
var localColor = color.map(function(_d, _i) {return i != _i ? _d * .7 : _d;}); |
|
return d3.rgb(localColor[0], localColor[1], localColor[2]); |
|
}; |
|
|
|
|
|
// join a pattern and a set of x,y points |
|
|
|
function pathPoints(pattern, points) { |
|
return points.reduce(function(acc, point, i) { |
|
return acc.replace('P' + i, point.x + ' ' + point.y); |
|
}, pattern); |
|
} |
|
|
|
// convert degrees to radians |
|
|
|
function degreesToRadians(degrees) { |
|
return degrees / 180 * Math.PI; |
|
} |
|
|
|
// given a radius, create a triangel around the origin |
|
|
|
function createTrianglePath(radius) { |
|
var points = ANGLES.map(function(angle) { |
|
return { |
|
x: Math.cos(angle) * radius, |
|
y: Math.sin(angle) * radius + radius / 4, |
|
}; |
|
}); |
|
|
|
return pathPoints(TRIANGLE, points); |
|
} |
|
|
|
return charlet; |
|
} |
