Stukjes code

Dit is een verzameling van stukjes d3js code die ik zelf regelmatig gebruik. Ik wilde ze graag op één plaats verzamelen om ze makkelijk terug te kunnen vinden, dus waarom niet openbaar? Misschien heeft iemand er nog iets aan.
De meeste stukjes heb ik op forums gevonden, sommige heb ik zelf bedacht.

Radius berekenen

Wat stop je erin: de oppervlakte van de cirkel
Wat komt eruit: de radius van de cirkel

function calcRadius(number) {
var area = number*circleFactor;
var r2 = area/Math.PI;
var r = Math.sqrt(r2);
var radius = r;
return radius;
}

Objecten naar voren/achteren

Gebruik:
graphic.selectAll(“.bollen1”).moveToFront();
graphic.selectAll(“.bollen1”).moveToBack();

d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};

d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};

Force

//———– variables
var nodes = data;

nodes.forEach( function(d,i) { //—– bepaal plaatsing en grootte
d.x = Math.random() * grWidth;
d.y = Math.random() * grHeight;
d.radius = (grWidth/data.length)/5;
});

var force = d3.layout.force() //—– bepaal natuurkundige wetten
.gravity(0.05)
.charge(0)
.friction(0.8)
.chargeDistance(0.2)
.nodes(nodes)
.size([grWidth, grHeight]);

force.start();

Dan maak je de bollen, waarbij je nodes als data gebruikt en d.x, d.y en d.radius bepalen de plaatsing. Je kunt ook .call(force.drag) gebruiken.

Onderaan plakken:
//———– functions
force.on(“tick”, function(e) {
var q = d3.geom.quadtree(nodes),
i = 0,
n = nodes.length;

//collision detection
while (++i < n) q.visit(collide(nodes[i]));

//change position
graphic.selectAll(“.bollen”) //—– vul hier de class van je bollen in
.attr(“transform”, function(d) {
return “translate(“+d.x+”,”+d.y+”)”;
});
});

function collide(node) {
var r = node.radius + 16,
nx1 = node.x – r,
nx2 = node.x + r,
ny1 = node.y – r,
ny2 = node.y + r;

return function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== node)) {
var x = node.x – quad.point.x,
y = node.y – quad.point.y,
l = Math.sqrt(x * x + y * y),
r = node.radius + quad.point.radius;
if (l < r) {
l = (l – r) / l * .5;
node.x -= x *= l;
node.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
}