Add force & treemap to d3.layout.
This commit is contained in:
Michael Bostock
Родитель
3cfb007d9d
Коммит
36e935a8c8
2
Makefile
2
Makefile
|
|
@ -94,8 +94,10 @@ d3.layout.js: \
|
|||
src/start.js \
|
||||
src/layout/layout.js \
|
||||
src/layout/chord.js \
|
||||
src/layout/force.js \
|
||||
src/layout/pie.js \
|
||||
src/layout/stack.js \
|
||||
src/layout/treemap.js \
|
||||
src/end.js
|
||||
|
||||
d3.geo.js: \
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
(function(){d3 = {version: "1.4.0"}; // semver
|
||||
(function(){d3 = {version: "1.5.0"}; // semver
|
||||
if (!Date.now) Date.now = function() {
|
||||
return +new Date();
|
||||
};
|
||||
|
|
|
|||
375
d3.layout.js
375
d3.layout.js
|
|
@ -150,6 +150,200 @@ d3.layout.chord = function() {
|
|||
|
||||
return chord;
|
||||
};
|
||||
// A rudimentary force layout using Gauss-Seidel.
|
||||
d3.layout.force = function() {
|
||||
var force = {},
|
||||
event = d3.dispatch("tick"),
|
||||
size = [1, 1],
|
||||
alpha = .5,
|
||||
distance = 30,
|
||||
interval,
|
||||
nodes,
|
||||
links,
|
||||
distances;
|
||||
|
||||
function tick() {
|
||||
var n = distances.length,
|
||||
i, // current index
|
||||
o, // current link
|
||||
s, // current source
|
||||
t, // current target
|
||||
l, // current distance
|
||||
x, // x-distance
|
||||
y; // y-distance
|
||||
|
||||
// gauss-seidel relaxation
|
||||
for (i = 0; i < n; ++i) {
|
||||
o = distances[i];
|
||||
s = o.source;
|
||||
t = o.target;
|
||||
x = t.x - s.x;
|
||||
y = t.y - s.y;
|
||||
if (l = Math.sqrt(x * x + y * y)) {
|
||||
l = alpha / (o.distance * o.distance) * (l - distance * o.distance) / l;
|
||||
x *= l;
|
||||
y *= l;
|
||||
if (s.fixed) {
|
||||
if (t.fixed) continue;
|
||||
t.x -= x;
|
||||
t.y -= y;
|
||||
} else if (t.fixed) {
|
||||
s.x += x;
|
||||
s.y += y;
|
||||
} else {
|
||||
s.x += x;
|
||||
s.y += y;
|
||||
t.x -= x;
|
||||
t.y -= y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// simulated annealing, basically
|
||||
if ((alpha *= .99) < 1e-6) force.stop();
|
||||
|
||||
event.tick.dispatch({type: "tick"});
|
||||
}
|
||||
|
||||
force.on = function(type, listener) {
|
||||
event[type].add(listener);
|
||||
return force;
|
||||
};
|
||||
|
||||
force.nodes = function(x) {
|
||||
if (!arguments.length) return nodes;
|
||||
nodes = x;
|
||||
return force;
|
||||
};
|
||||
|
||||
force.links = function(x) {
|
||||
if (!arguments.length) return links;
|
||||
links = x;
|
||||
return force;
|
||||
};
|
||||
|
||||
force.size = function(x) {
|
||||
if (!arguments.length) return size;
|
||||
size = x;
|
||||
return force;
|
||||
};
|
||||
|
||||
force.distance = function(d) {
|
||||
if (!arguments.length) return distance;
|
||||
distance = d;
|
||||
return force;
|
||||
};
|
||||
|
||||
force.start = function() {
|
||||
var i,
|
||||
j,
|
||||
k,
|
||||
n = nodes.length,
|
||||
m = links.length,
|
||||
w = size[0],
|
||||
h = size[1],
|
||||
o;
|
||||
|
||||
var paths = [];
|
||||
for (i = 0; i < n; ++i) {
|
||||
o = nodes[i];
|
||||
o.x = o.x || Math.random() * w;
|
||||
o.y = o.y || Math.random() * h;
|
||||
o.fixed = 0;
|
||||
paths[i] = [];
|
||||
for (j = 0; j < n; ++j) {
|
||||
paths[i][j] = Infinity;
|
||||
}
|
||||
paths[i][i] = 0;
|
||||
}
|
||||
|
||||
for (i = 0; i < m; ++i) {
|
||||
o = links[i];
|
||||
paths[o.source][o.target] = 1;
|
||||
paths[o.target][o.source] = 1;
|
||||
o.source = nodes[o.source];
|
||||
o.target = nodes[o.target];
|
||||
}
|
||||
|
||||
// Floyd-Warshall
|
||||
for (k = 0; k < n; ++k) {
|
||||
for (i = 0; i < n; ++i) {
|
||||
for (j = 0; j < n; ++j) {
|
||||
paths[i][j] = Math.min(paths[i][j], paths[i][k] + paths[k][j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
distances = [];
|
||||
for (i = 0; i < n; ++i) {
|
||||
for (j = i + 1; j < n; ++j) {
|
||||
distances.push({
|
||||
source: nodes[i],
|
||||
target: nodes[j],
|
||||
distance: paths[i][j] * paths[i][j]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
distances.sort(function(a, b) {
|
||||
return a.distance - b.distance;
|
||||
});
|
||||
|
||||
if (interval) clearInterval(interval);
|
||||
interval = setInterval(tick, 24);
|
||||
return force;
|
||||
};
|
||||
|
||||
force.resume = function() {
|
||||
alpha = .1;
|
||||
if (!interval) interval = setInterval(tick, 24);
|
||||
return force;
|
||||
};
|
||||
|
||||
force.stop = function() {
|
||||
interval = clearInterval(interval);
|
||||
return force;
|
||||
};
|
||||
|
||||
// use `node.call(force.drag)` to make nodes draggable
|
||||
force.drag = function() {
|
||||
var node, element;
|
||||
|
||||
this
|
||||
.on("mouseover", function(d) { d.fixed = true; })
|
||||
.on("mouseout", function(d) { if (d != node) d.fixed = false; })
|
||||
.on("mousedown", mousedown);
|
||||
|
||||
d3.select(window)
|
||||
.on("mousemove", mousemove)
|
||||
.on("mouseup", mouseup);
|
||||
|
||||
function mousedown(d) {
|
||||
(node = d).fixed = true;
|
||||
element = this;
|
||||
d3.event.preventDefault();
|
||||
}
|
||||
|
||||
function mousemove() {
|
||||
if (!node) return;
|
||||
var m = d3.svg.mouse(element);
|
||||
node.x = m[0];
|
||||
node.y = m[1];
|
||||
force.resume(); // restart annealing
|
||||
}
|
||||
|
||||
function mouseup() {
|
||||
if (!node) return;
|
||||
mousemove();
|
||||
node.fixed = false;
|
||||
node = element = null;
|
||||
}
|
||||
|
||||
return force;
|
||||
};
|
||||
|
||||
return force;
|
||||
};
|
||||
d3.layout.pie = function() {
|
||||
var value = Number,
|
||||
sort = null,
|
||||
|
|
@ -407,4 +601,185 @@ function d3_layout_stackMaxIndex(array) {
|
|||
function d3_layout_stackSum(p, d) {
|
||||
return p + d.y;
|
||||
}
|
||||
// Squarified Treemaps by Mark Bruls, Kees Huizing, and Jarke J. van Wijk
|
||||
d3.layout.treemap = function() {
|
||||
var children = d3_layout_treemapChildren,
|
||||
value = d3_layout_treemapValue,
|
||||
round = Math.round,
|
||||
size = [1, 1]; // width, height
|
||||
|
||||
// Recursively compute the node depth and value.
|
||||
// Also converts the data representation into a standard tree structure.
|
||||
// Also sorts child nodes by descending value to optimize squarification.
|
||||
function sum(data, depth, nodes) {
|
||||
var datas = children.call(treemap, data, depth),
|
||||
node = {depth: depth, data: data};
|
||||
nodes.push(node);
|
||||
if (datas) {
|
||||
var i = -1,
|
||||
n = datas.length,
|
||||
c = node.children = [],
|
||||
v = 0,
|
||||
j = depth + 1;
|
||||
while (++i < n) {
|
||||
d = sum(datas[i], j, nodes);
|
||||
if (d.value > 0) { // ignore NaN, negative, etc.
|
||||
c.push(d);
|
||||
v += d.value;
|
||||
}
|
||||
}
|
||||
node.value = v;
|
||||
} else {
|
||||
node.value = value.call(treemap, data, depth);
|
||||
}
|
||||
if (!depth) scale(node, size[0] * size[1] / node.value); // root
|
||||
return node;
|
||||
}
|
||||
|
||||
// Recursively compute the node area based on value & scale.
|
||||
function scale(node, k) {
|
||||
var children = node.children;
|
||||
node.area = node.value * k;
|
||||
if (children) {
|
||||
var i = -1,
|
||||
n = children.length;
|
||||
while (++i < n) scale(children[i], k);
|
||||
}
|
||||
}
|
||||
|
||||
// Recursively arranges the specified node's children into squarified rows.
|
||||
function squarify(node) {
|
||||
if (!node.children) return;
|
||||
var rect = {x: node.x, y: node.y, dx: node.dx, dy: node.dy},
|
||||
row = [],
|
||||
children = node.children.slice().sort(d3_layout_treemapSort),
|
||||
child,
|
||||
best = Infinity, // the best row score so far
|
||||
score, // the current row score
|
||||
u = Math.min(rect.dx, rect.dy), // initial orientation
|
||||
n;
|
||||
row.area = 0;
|
||||
while ((n = children.length) > 0) {
|
||||
row.push(child = children[n - 1]);
|
||||
row.area += child.area;
|
||||
if ((score = worst(row, u)) <= best) { // continue with this orientation
|
||||
children.pop();
|
||||
best = score;
|
||||
} else { // abort, and try a different orientation
|
||||
row.area -= row.pop().area;
|
||||
position(row, u, rect, false);
|
||||
u = Math.min(rect.dx, rect.dy);
|
||||
row.length = row.area = 0;
|
||||
best = Infinity;
|
||||
}
|
||||
}
|
||||
if (row.length) {
|
||||
position(row, u, rect, true);
|
||||
row.length = row.area = 0;
|
||||
}
|
||||
node.children.forEach(squarify);
|
||||
}
|
||||
|
||||
// Computes the score for the specified row, as the worst aspect ratio.
|
||||
function worst(row, u) {
|
||||
var s = row.area,
|
||||
r,
|
||||
rmax = 0,
|
||||
rmin = Infinity,
|
||||
i = -1,
|
||||
n = row.length;
|
||||
while (++i < n) {
|
||||
r = row[i].area;
|
||||
if (r < rmin) rmin = r;
|
||||
if (r > rmax) rmax = r;
|
||||
}
|
||||
s *= s;
|
||||
u *= u;
|
||||
return Math.max((u * rmax) / s, s / (u * rmin));
|
||||
}
|
||||
|
||||
// Positions the specified row of nodes. Modifies `rect`.
|
||||
function position(row, u, rect, flush) {
|
||||
var i = -1,
|
||||
n = row.length,
|
||||
x = rect.x,
|
||||
y = rect.y,
|
||||
v = u ? round(row.area / u) : 0,
|
||||
o;
|
||||
if (u == rect.dx) { // horizontal subdivision
|
||||
if (flush || v > rect.dy) v = rect.dy; // over+underflow
|
||||
while (++i < n) {
|
||||
o = row[i];
|
||||
o.x = x;
|
||||
o.y = y;
|
||||
o.dy = v;
|
||||
x += o.dx = round(o.area / v);
|
||||
}
|
||||
o.dx += rect.x + rect.dx - x; // rounding error
|
||||
rect.y += v;
|
||||
rect.dy -= v;
|
||||
} else { // vertical subdivision
|
||||
if (flush || v > rect.dx) v = rect.dx; // over+underflow
|
||||
while (++i < n) {
|
||||
o = row[i];
|
||||
o.x = x;
|
||||
o.y = y;
|
||||
o.dx = v;
|
||||
y += o.dy = round(o.area / v);
|
||||
}
|
||||
o.dy += rect.y + rect.dy - y; // rounding error
|
||||
rect.x += v;
|
||||
rect.dx -= v;
|
||||
}
|
||||
}
|
||||
|
||||
function treemap(d) {
|
||||
var nodes = [],
|
||||
root = sum(d, 0, nodes);
|
||||
root.x = 0;
|
||||
root.y = 0;
|
||||
root.dx = size[0];
|
||||
root.dy = size[1];
|
||||
squarify(root);
|
||||
return nodes;
|
||||
}
|
||||
|
||||
treemap.children = function(x) {
|
||||
if (!arguments.length) return children;
|
||||
children = x;
|
||||
return treemap;
|
||||
};
|
||||
|
||||
treemap.value = function(x) {
|
||||
if (!arguments.length) return value;
|
||||
value = x;
|
||||
return treemap;
|
||||
};
|
||||
|
||||
treemap.size = function(x) {
|
||||
if (!arguments.length) return size;
|
||||
size = x;
|
||||
return treemap;
|
||||
};
|
||||
|
||||
treemap.round = function(x) {
|
||||
if (!arguments.length) return round != Number;
|
||||
round = x ? Math.round : Number;
|
||||
return treemap;
|
||||
};
|
||||
|
||||
return treemap;
|
||||
};
|
||||
|
||||
function d3_layout_treemapChildren(d) {
|
||||
return d.children;
|
||||
}
|
||||
|
||||
function d3_layout_treemapValue(d) {
|
||||
return d.value;
|
||||
}
|
||||
|
||||
function d3_layout_treemapSort(a, b) {
|
||||
return b.area - a.area;
|
||||
}
|
||||
})()
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
(function(){function A(a){return a.reduce(B,0)}function C(a){for(var j=1,f=0,c=a[0].y,i,e=a.length;j<e;++j)if((i=a[j].y)>c){f=j;c=i}return f}function B(a,j){return a+j.y}d3.layout={};d3.layout.chord=function(){function a(){var g={},l=[],t=d3.range(b),q=[],r,n,w,o,s;c=[];i=[];r=0;for(o=-1;++o<b;){n=0;for(s=-1;++s<b;)n+=e[o][s];l.push(n);q.push(d3.range(b));r+=n}k&&t.sort(function(x,u){return k(l[x],l[u])});m&&q.forEach(function(x,u){x.sort(function(D,E){return m(e[u][D],e[u][E])})});r=(2*Math.PI-h*
|
||||
b)/r;n=0;for(o=-1;++o<b;){w=n;for(s=-1;++s<b;){var v=t[o],y=q[o][s],z=e[v][y];g[v+"-"+y]={index:v,subindex:y,startAngle:n,endAngle:n+=z*r,value:z}}i.push({index:v,startAngle:w,endAngle:n,value:(n-w)/r});n+=h}for(o=-1;++o<b;)for(s=o-1;++s<b;){t=g[o+"-"+s];q=g[s+"-"+o];if(t.value||q.value)c.push({source:t,target:q})}p&&j()}function j(){c.sort(function(g,l){g=Math.min(g.source.value,g.target.value);l=Math.min(l.source.value,l.target.value);return p(g,l)})}var f={},c,i,e,b,h=0,k,m,p;f.matrix=function(g){if(!arguments.length)return e;
|
||||
b=(e=g)&&e.length;c=i=null;return f};f.padding=function(g){if(!arguments.length)return h;h=g;c=i=null;return f};f.sortGroups=function(g){if(!arguments.length)return k;k=g;c=i=null;return f};f.sortSubgroups=function(g){if(!arguments.length)return m;m=g;c=null;return f};f.sortChords=function(g){if(!arguments.length)return p;p=g;c&&j();return f};f.chords=function(){c||a();return c};f.groups=function(){i||a();return i};return f};d3.layout.pie=function(){function a(e){var b=+(typeof c=="function"?c.apply(this,
|
||||
arguments):c),h=(typeof i=="function"?i.apply(this,arguments):i)-c,k=d3.range(e.length);f!=null&&k.sort(function(g,l){return f(e[g],e[l])});var m=e.map(j);h/=m.reduce(function(g,l){return g+l},0);var p=k.map(function(g){return{value:d=m[g],startAngle:b,endAngle:b+=d*h}});return e.map(function(g,l){return p[k[l]]})}var j=Number,f=null,c=0,i=2*Math.PI;a.value=function(e){if(!arguments.length)return j;j=e;return a};a.sort=function(e){if(!arguments.length)return f;f=e;return a};a.startAngle=function(e){if(!arguments.length)return c;
|
||||
c=e;return a};a.endAngle=function(e){if(!arguments.length)return i;i=e;return a};return a};d3.layout.stack=function(){function a(c){var i=c.length,e=c[0].length,b,h,k,m=F[j](c);G[f](c,m);for(h=0;h<e;++h){b=1;for(k=c[m[0]][h].y0;b<i;++b)c[m[b]][h].y0=k+=c[m[b-1]][h].y}return c}var j="default",f="zero";a.order=function(c){if(!arguments.length)return j;j=c;return a};a.offset=function(c){if(!arguments.length)return f;f=c;return a};return a};var F={"inside-out":function(a){var j=a.length,f,c=a.map(C),
|
||||
i=a.map(A),e=d3.range(j).sort(function(p,g){return c[p]-c[g]}),b=0,h=0,k=[],m=[];for(a=0;a<j;a++){f=e[a];if(b<h){b+=i[f];k.push(f)}else{h+=i[f];m.push(f)}}return m.reverse().concat(k)},reverse:function(a){return d3.range(a.length).reverse()},"default":function(a){return d3.range(a.length)}},G={silhouette:function(a,j){var f=a.length,c=a[0].length,i=[],e=0,b,h,k;for(h=0;h<c;++h){for(k=b=0;b<f;b++)k+=a[b][h].y;if(k>e)e=k;i.push(k)}h=0;for(b=j[0];h<c;++h)a[b][h].y0=(e-i[h])/2},wiggle:function(a,j){var f=
|
||||
a.length,c=a[0],i=c.length,e,b,h,k,m,p=j[0],g,l,t,q,r,n;a[p][0].y0=r=n=0;for(b=1;b<i;++b){for(g=e=0;e<f;++e)g+=a[e][b].y;l=e=0;for(q=c[b].x-c[b-1].x;e<f;++e){h=0;k=j[e];for(t=(a[k][b].y-a[k][b-1].y)/(2*q);h<e;++h)t+=(a[m=j[h]][b].y-a[m][b-1].y)/q;l+=t*a[k][b].y}a[p][b].y0=r-=g?l/g*q:0;if(r<n)n=r}for(b=0;b<i;++b)a[p][b].y0-=n},zero:function(a,j){for(var f=0,c=a[0].length,i=j[0];f<c;++f)a[i][f].y0=0}}})();
|
||||
(function(){function A(c){return c.reduce(B,0)}function C(c){for(var h=1,n=0,i=c[0].y,o,l=c.length;h<l;++h)if((o=c[h].y)>i){n=h;i=o}return n}function B(c,h){return c+h.y}function D(c){return c.children}function E(c){return c.value}function F(c,h){return h.area-c.area}d3.layout={};d3.layout.chord=function(){function c(){var a={},j=[],f=d3.range(g),s=[],t,k,q,r,u;i=[];o=[];t=0;for(r=-1;++r<g;){k=0;for(u=-1;++u<g;)k+=l[r][u];j.push(k);s.push(d3.range(g));t+=k}p&&f.sort(function(y,x){return p(j[y],j[x])});
|
||||
e&&s.forEach(function(y,x){y.sort(function(G,H){return e(l[x][G],l[x][H])})});t=(2*Math.PI-m*g)/t;k=0;for(r=-1;++r<g;){q=k;for(u=-1;++u<g;){var v=f[r],w=s[r][u],z=l[v][w];a[v+"-"+w]={index:v,subindex:w,startAngle:k,endAngle:k+=z*t,value:z}}o.push({index:v,startAngle:q,endAngle:k,value:(k-q)/t});k+=m}for(r=-1;++r<g;)for(u=r-1;++u<g;){f=a[r+"-"+u];s=a[u+"-"+r];if(f.value||s.value)i.push({source:f,target:s})}b&&h()}function h(){i.sort(function(a,j){a=Math.min(a.source.value,a.target.value);j=Math.min(j.source.value,
|
||||
j.target.value);return b(a,j)})}var n={},i,o,l,g,m=0,p,e,b;n.matrix=function(a){if(!arguments.length)return l;g=(l=a)&&l.length;i=o=null;return n};n.padding=function(a){if(!arguments.length)return m;m=a;i=o=null;return n};n.sortGroups=function(a){if(!arguments.length)return p;p=a;i=o=null;return n};n.sortSubgroups=function(a){if(!arguments.length)return e;e=a;i=null;return n};n.sortChords=function(a){if(!arguments.length)return b;b=a;i&&h();return n};n.chords=function(){i||c();return i};n.groups=
|
||||
function(){o||c();return o};return n};d3.layout.force=function(){function c(){var b=e.length,a,j,f,s,t,k,q;for(a=0;a<b;++a){j=e[a];f=j.source;s=j.target;k=s.x-f.x;q=s.y-f.y;if(t=Math.sqrt(k*k+q*q)){t=o/(j.distance*j.distance)*(t-l*j.distance)/t;k*=t;q*=t;if(f.fixed){if(!s.fixed){s.x-=k;s.y-=q}}else if(s.fixed){f.x+=k;f.y+=q}else{f.x+=k;f.y+=q;s.x-=k;s.y-=q}}}if((o*=0.99)<1.0E-6)h.stop();n.tick.dispatch({type:"tick"})}var h={},n=d3.dispatch("tick"),i=[1,1],o=0.5,l=30,g,m,p,e;h.on=function(b,a){n[b].add(a);
|
||||
return h};h.nodes=function(b){if(!arguments.length)return m;m=b;return h};h.links=function(b){if(!arguments.length)return p;p=b;return h};h.size=function(b){if(!arguments.length)return i;i=b;return h};h.distance=function(b){if(!arguments.length)return l;l=b;return h};h.start=function(){var b,a,j,f=m.length;j=p.length;var s=i[0],t=i[1],k=[];for(b=0;b<f;++b){a=m[b];a.x=a.x||Math.random()*s;a.y=a.y||Math.random()*t;a.fixed=0;k[b]=[];for(a=0;a<f;++a)k[b][a]=Infinity;k[b][b]=0}for(b=0;b<j;++b){a=p[b];
|
||||
k[a.source][a.target]=1;k[a.target][a.source]=1;a.source=m[a.source];a.target=m[a.target]}for(j=0;j<f;++j)for(b=0;b<f;++b)for(a=0;a<f;++a)k[b][a]=Math.min(k[b][a],k[b][j]+k[j][a]);e=[];for(b=0;b<f;++b)for(a=b+1;a<f;++a)e.push({source:m[b],target:m[a],distance:k[b][a]*k[b][a]});e.sort(function(q,r){return q.distance-r.distance});g&&clearInterval(g);g=setInterval(c,24);return h};h.resume=function(){o=0.1;g||(g=setInterval(c,24));return h};h.stop=function(){g=clearInterval(g);return h};h.drag=function(){function b(){if(a){var f=
|
||||
d3.svg.mouse(j);a.x=f[0];a.y=f[1];h.resume()}}var a,j;this.on("mouseover",function(f){f.fixed=true}).on("mouseout",function(f){if(f!=a)f.fixed=false}).on("mousedown",function(f){(a=f).fixed=true;j=this;d3.event.preventDefault()});d3.select(window).on("mousemove",b).on("mouseup",function(){if(a){b();a.fixed=false;a=j=null}});return h};return h};d3.layout.pie=function(){function c(l){var g=+(typeof i=="function"?i.apply(this,arguments):i),m=(typeof o=="function"?o.apply(this,arguments):o)-i,p=d3.range(l.length);
|
||||
n!=null&&p.sort(function(a,j){return n(l[a],l[j])});var e=l.map(h);m/=e.reduce(function(a,j){return a+j},0);var b=p.map(function(a){return{value:d=e[a],startAngle:g,endAngle:g+=d*m}});return l.map(function(a,j){return b[p[j]]})}var h=Number,n=null,i=0,o=2*Math.PI;c.value=function(l){if(!arguments.length)return h;h=l;return c};c.sort=function(l){if(!arguments.length)return n;n=l;return c};c.startAngle=function(l){if(!arguments.length)return i;i=l;return c};c.endAngle=function(l){if(!arguments.length)return o;
|
||||
o=l;return c};return c};d3.layout.stack=function(){function c(i){var o=i.length,l=i[0].length,g,m,p,e=I[h](i);J[n](i,e);for(m=0;m<l;++m){g=1;for(p=i[e[0]][m].y0;g<o;++g)i[e[g]][m].y0=p+=i[e[g-1]][m].y}return i}var h="default",n="zero";c.order=function(i){if(!arguments.length)return h;h=i;return c};c.offset=function(i){if(!arguments.length)return n;n=i;return c};return c};var I={"inside-out":function(c){var h=c.length,n,i=c.map(C),o=c.map(A),l=d3.range(h).sort(function(b,a){return i[b]-i[a]}),g=0,
|
||||
m=0,p=[],e=[];for(c=0;c<h;c++){n=l[c];if(g<m){g+=o[n];p.push(n)}else{m+=o[n];e.push(n)}}return e.reverse().concat(p)},reverse:function(c){return d3.range(c.length).reverse()},"default":function(c){return d3.range(c.length)}},J={silhouette:function(c,h){var n=c.length,i=c[0].length,o=[],l=0,g,m,p;for(m=0;m<i;++m){for(p=g=0;g<n;g++)p+=c[g][m].y;if(p>l)l=p;o.push(p)}m=0;for(g=h[0];m<i;++m)c[g][m].y0=(l-o[m])/2},wiggle:function(c,h){var n=c.length,i=c[0],o=i.length,l,g,m,p,e,b=h[0],a,j,f,s,t,k;c[b][0].y0=
|
||||
t=k=0;for(g=1;g<o;++g){for(a=l=0;l<n;++l)a+=c[l][g].y;j=l=0;for(s=i[g].x-i[g-1].x;l<n;++l){m=0;p=h[l];for(f=(c[p][g].y-c[p][g-1].y)/(2*s);m<l;++m)f+=(c[e=h[m]][g].y-c[e][g-1].y)/s;j+=f*c[p][g].y}c[b][g].y0=t-=a?j/a*s:0;if(t<k)k=t}for(g=0;g<o;++g)c[b][g].y0-=k},zero:function(c,h){for(var n=0,i=c[0].length,o=h[0];n<i;++n)c[o][n].y0=0}};d3.layout.treemap=function(){function c(e,b,a){var j=l.call(o,e,b),f={depth:b,data:e};a.push(f);if(j){e=-1;for(var s=j.length,t=f.children=[],k=0,q=b+1;++e<s;){d=c(j[e],
|
||||
q,a);if(d.value>0){t.push(d);k+=d.value}}f.value=k}else f.value=g.call(o,e,b);b||h(f,p[0]*p[1]/f.value);return f}function h(e,b){var a=e.children;e.area=e.value*b;if(a)for(var j=-1,f=a.length;++j<f;)h(a[j],b)}function n(e){if(e.children){var b={x:e.x,y:e.y,dx:e.dx,dy:e.dy},a=[],j=e.children.slice().sort(F),f,s=Infinity,t=Math.min(b.dx,b.dy);for(a.area=0;(f=j.length)>0;){a.push(f=j[f-1]);a.area+=f.area;f=t;for(var k=a.area,q=void 0,r=0,u=Infinity,v=-1,w=a.length;++v<w;){q=a[v].area;if(q<u)u=q;if(q>
|
||||
r)r=q}k*=k;f*=f;if((f=Math.max(f*r/k,k/(f*u)))<=s){j.pop();s=f}else{a.area-=a.pop().area;i(a,t,b,false);t=Math.min(b.dx,b.dy);a.length=a.area=0;s=Infinity}}if(a.length){i(a,t,b,true);a.length=a.area=0}e.children.forEach(n)}}function i(e,b,a,j){var f=-1,s=e.length,t=a.x,k=a.y,q=b?m(e.area/b):0,r;if(b==a.dx){if(j||q>a.dy)q=a.dy;for(;++f<s;){r=e[f];r.x=t;r.y=k;r.dy=q;t+=r.dx=m(r.area/q)}r.dx+=a.x+a.dx-t;a.y+=q;a.dy-=q}else{if(j||q>a.dx)q=a.dx;for(;++f<s;){r=e[f];r.x=t;r.y=k;r.dx=q;k+=r.dy=m(r.area/q)}r.dy+=
|
||||
a.y+a.dy-k;a.x+=q;a.dx-=q}}function o(e){var b=[];e=c(e,0,b);e.x=0;e.y=0;e.dx=p[0];e.dy=p[1];n(e);return b}var l=D,g=E,m=Math.round,p=[1,1];o.children=function(e){if(!arguments.length)return l;l=e;return o};o.value=function(e){if(!arguments.length)return g;g=e;return o};o.size=function(e){if(!arguments.length)return p;p=e;return o};o.round=function(e){if(!arguments.length)return m!=Number;m=e?Math.round:Number;return o};return o}})();
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ a)})}function Ia(a,b){var d=Date.now(),g=false,e=d+b,c=F;if(isFinite(b)){for(;c;
|
|||
function Ma(a){return a.outerRadius}function ja(a){return a.startAngle}function ka(a){return a.endAngle}function $(a,b,d,g){var e=[],c=-1,f=b.length,h=typeof d=="function",i=typeof g=="function",k;if(h&&i)for(;++c<f;)e.push([d.call(a,k=b[c],c),g.call(a,k,c)]);else if(h)for(;++c<f;)e.push([d.call(a,b[c],c),g]);else if(i)for(;++c<f;)e.push([d,g.call(a,b[c],c)]);else for(;++c<f;)e.push([d,g]);return e}function la(a){return a[0]}function ma(a){return a[1]}function H(a){var b=[],d=0,g=a.length,e=a[0];
|
||||
for(b.push(e[0],",",e[1]);++d<g;)b.push("L",(e=a[d])[0],",",e[1]);return b.join("")}function na(a,b){if(b.length<1||a.length!=b.length&&a.length!=b.length+2)return H(a);var d=a.length!=b.length,g="",e=a[0],c=a[1],f=b[0],h=f,i=1;if(d){g+="Q"+(c[0]-f[0]*2/3)+","+(c[1]-f[1]*2/3)+","+c[0]+","+c[1];e=a[1];i=2}if(b.length>1){h=b[1];c=a[i];i++;g+="C"+(e[0]+f[0])+","+(e[1]+f[1])+","+(c[0]-h[0])+","+(c[1]-h[1])+","+c[0]+","+c[1];for(e=2;e<b.length;e++,i++){c=a[i];h=b[e];g+="S"+(c[0]-h[0])+","+(c[1]-h[1])+
|
||||
","+c[0]+","+c[1]}}if(d){d=a[i];g+="Q"+(c[0]+h[0]*2/3)+","+(c[1]+h[1]*2/3)+","+d[0]+","+d[1]}return g}function oa(a,b){for(var d=[],g=(1-b)/2,e=a[0],c=a[1],f=a[2],h=2,i=a.length;++h<i;){d.push([g*(f[0]-e[0]),g*(f[1]-e[1])]);e=c;c=f;f=a[h]}d.push([g*(f[0]-e[0]),g*(f[1]-e[1])]);return d}function B(a,b){return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]+a[3]*b[3]}function L(a,b,d){a.push("C",B(pa,b),",",B(pa,d),",",B(qa,b),",",B(qa,d),",",B(M,b),",",B(M,d))}function Na(){return 0}function Oa(a){return a.source}function Pa(a){return a.target}
|
||||
function Qa(a){return a.radius}function Ra(){return 64}function Sa(){return"circle"}d3={version:"1.4.0"};if(!Date.now)Date.now=function(){return+new Date};if(!Object.create)Object.create=function(a){function b(){}b.prototype=a;return new b};var N=function(a){return Array.prototype.slice.call(a)};try{N(document.documentElement.childNodes)}catch(eb){N=ua}d3.ascending=function(a,b){return a<b?-1:a>b?1:0};d3.descending=function(a,b){return b<a?-1:b>a?1:0};d3.min=function(a,b){var d=0,g=a.length,e=a[0],
|
||||
function Qa(a){return a.radius}function Ra(){return 64}function Sa(){return"circle"}d3={version:"1.5.0"};if(!Date.now)Date.now=function(){return+new Date};if(!Object.create)Object.create=function(a){function b(){}b.prototype=a;return new b};var N=function(a){return Array.prototype.slice.call(a)};try{N(document.documentElement.childNodes)}catch(eb){N=ua}d3.ascending=function(a,b){return a<b?-1:a>b?1:0};d3.descending=function(a,b){return b<a?-1:b>a?1:0};d3.min=function(a,b){var d=0,g=a.length,e=a[0],
|
||||
c;if(arguments.length==1)for(;++d<g;){if(e>(c=a[d]))e=c}else for(e=b(a[0]);++d<g;)if(e>(c=b(a[d])))e=c;return e};d3.max=function(a,b){var d=0,g=a.length,e=a[0],c;if(arguments.length==1)for(;++d<g;){if(e<(c=a[d]))e=c}else for(e=b(e);++d<g;)if(e<(c=b(a[d])))e=c;return e};d3.nest=function(){function a(h,i){if(i>=g.length)return f?f.call(d,h):c?h.sort(c):h;for(var k=-1,j=h.length,o=g[i++],p,m,n={};++k<j;)if((p=o(m=h[k]))in n)n[p].push(m);else n[p]=[m];for(p in n)n[p]=a(n[p],i);return n}function b(h,i){if(i>=
|
||||
g.length)return h;var k=[],j=e[i++],o;for(o in h)k.push({key:o,values:b(h[o],i)});j&&k.sort(function(p,m){return j(p.key,m.key)});return k}var d={},g=[],e=[],c,f;d.map=function(h){return a(h,0)};d.entries=function(h){return b(a(h,0),0)};d.key=function(h){g.push(h);return d};d.sortKeys=function(h){e[g.length-1]=h;return d};d.sortValues=function(h){c=h;return d};d.rollup=function(h){f=h;return d};return d};d3.keys=function(a){var b=[],d;for(d in a)b.push(d);return b};d3.values=function(a){var b=[],
|
||||
d;for(d in a)b.push(a[d]);return b};d3.entries=function(a){var b=[],d;for(d in a)b.push({key:d,value:a[d]});return b};d3.merge=function(a){return Array.prototype.concat.apply([],a)};d3.split=function(a,b){var d=[],g=[],e,c=-1,f=a.length;if(arguments.length<2)b=va;for(;++c<f;)if(b.call(g,e=a[c],c))g=[];else{g.length||d.push(g);g.push(e)}return d};d3.range=function(a,b,d){if(arguments.length==1){b=a;a=0}if(d==null)d=1;if((b-a)/d==Infinity)throw Error("infinite range");var g=[],e=-1,c;if(d<0)for(;(c=
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Clustered Network</title>
|
||||
<script type="text/javascript" src="../../d3.js"></script>
|
||||
<script type="text/javascript" src="../../d3.geom.js"></script>
|
||||
<script type="text/javascript" src="layout.js"></script>
|
||||
<script type="text/javascript" src="../../d3.layout.js"></script>
|
||||
<style type="text/css">
|
||||
svg {
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -190,10 +190,10 @@ function init() {
|
|||
|
||||
net = network(data, net, getGroup, expand);
|
||||
|
||||
force = layout_force()
|
||||
force = d3.layout.force()
|
||||
.nodes(net.nodes)
|
||||
.links(net.links)
|
||||
.size({x: w, y: h})
|
||||
.size([w, h])
|
||||
.distance(60)
|
||||
.start();
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>Force-Directed Layout</title>
|
||||
<script type="text/javascript" src="../../d3.js"></script>
|
||||
<script type="text/javascript" src="layout.js"></script>
|
||||
<script type="text/javascript" src="../../d3.layout.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="force.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ var vis = d3.select("#chart")
|
|||
.attr("height", h);
|
||||
|
||||
d3.json("miserables.json", function(json) {
|
||||
var force = layout_force()
|
||||
var force = d3.layout.force()
|
||||
.nodes(json.nodes)
|
||||
.links(json.links)
|
||||
.size({x: w, y: h})
|
||||
.size([w, h])
|
||||
.start();
|
||||
|
||||
var link = vis.selectAll("line.link")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
.cell {
|
||||
border: solid 1px white;
|
||||
font: 10px sans-serif;
|
||||
line-height: 12px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-indent: 2px;
|
||||
}
|
||||
|
|
@ -4,53 +4,11 @@
|
|||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<title>Treemap</title>
|
||||
<script type="text/javascript" src="../../d3.js"></script>
|
||||
<script type="text/javascript" src="layout.js"></script>
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: absolute;
|
||||
border: solid 1px white;
|
||||
overflow: hidden;
|
||||
line-height: 12px;
|
||||
text-indent: 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" src="../../d3.layout.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="treemap.css"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
|
||||
var w = 960,
|
||||
h = 500,
|
||||
color = d3.scale.category20c();
|
||||
|
||||
var treemap = layout_treemap()
|
||||
.size([w, h])
|
||||
.children(function(d, i) { return typeof d.value == "object" && d3.entries(d.value); })
|
||||
.value(function(d) { return d.value; });
|
||||
|
||||
var div = d3.select("body").append("div")
|
||||
.style("position", "relative")
|
||||
.style("width", w + "px")
|
||||
.style("height", h + "px");
|
||||
|
||||
d3.json("flare.json", function(json) {
|
||||
div.data(d3.entries(json)).selectAll("div")
|
||||
.data(treemap)
|
||||
.enter().append("div")
|
||||
.attr("class", "cell")
|
||||
.style("background", function(d) { return d.children ? color(d.data.key) : null; })
|
||||
.style("left", function(d) { return d.x + "px"; })
|
||||
.style("top", function(d) { return d.y + "px"; })
|
||||
.style("width", function(d) { return d.dx - 1 + "px"; })
|
||||
.style("height", function(d) { return d.dy - 1 + "px"; })
|
||||
.text(function(d) { return d.children ? null : d.data.key; });
|
||||
});
|
||||
|
||||
</script>
|
||||
<div id="chart"></div>
|
||||
<script type="text/javascript" src="treemap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
var w = 960,
|
||||
h = 500,
|
||||
color = d3.scale.category20c();
|
||||
|
||||
var treemap = d3.layout.treemap()
|
||||
.size([w, h])
|
||||
.children(function(d, i) { return typeof d.value == "object" && d3.entries(d.value); })
|
||||
.value(function(d) { return d.value; });
|
||||
|
||||
var div = d3.select("#chart").append("div")
|
||||
.style("position", "relative")
|
||||
.style("width", w + "px")
|
||||
.style("height", h + "px");
|
||||
|
||||
d3.json("flare.json", function(json) {
|
||||
div.data(d3.entries(json)).selectAll("div")
|
||||
.data(treemap)
|
||||
.enter().append("div")
|
||||
.attr("class", "cell")
|
||||
.style("background", function(d) { return d.children ? color(d.data.key) : null; })
|
||||
.style("left", function(d) { return d.x + "px"; })
|
||||
.style("top", function(d) { return d.y + "px"; })
|
||||
.style("width", function(d) { return d.dx - 1 + "px"; })
|
||||
.style("height", function(d) { return d.dy - 1 + "px"; })
|
||||
.text(function(d) { return d.children ? null : d.data.key; });
|
||||
});
|
||||
|
|
@ -1 +1 @@
|
|||
d3 = {version: "1.4.0"}; // semver
|
||||
d3 = {version: "1.5.0"}; // semver
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// A rudimentary force layout using Gauss-Seidel.
|
||||
function layout_force() {
|
||||
d3.layout.force = function() {
|
||||
var force = {},
|
||||
event = d3.dispatch("tick"),
|
||||
size = {x: 1, y: 1},
|
||||
size = [1, 1],
|
||||
alpha = .5,
|
||||
distance = 30,
|
||||
interval,
|
||||
|
|
@ -88,8 +88,8 @@ function layout_force() {
|
|||
k,
|
||||
n = nodes.length,
|
||||
m = links.length,
|
||||
w = size.x,
|
||||
h = size.y,
|
||||
w = size[0],
|
||||
h = size[1],
|
||||
o;
|
||||
|
||||
var paths = [];
|
||||
|
|
@ -183,6 +183,7 @@ function layout_force() {
|
|||
function mouseup() {
|
||||
if (!node) return;
|
||||
mousemove();
|
||||
node.fixed = false;
|
||||
node = element = null;
|
||||
}
|
||||
|
||||
|
|
@ -190,4 +191,4 @@ function layout_force() {
|
|||
};
|
||||
|
||||
return force;
|
||||
}
|
||||
};
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// Squarified Treemaps by Mark Bruls, Kees Huizing, and Jarke J. van Wijk
|
||||
function layout_treemap() {
|
||||
var children = layout_treemapChildren,
|
||||
value = layout_treemapValue,
|
||||
d3.layout.treemap = function() {
|
||||
var children = d3_layout_treemapChildren,
|
||||
value = d3_layout_treemapValue,
|
||||
round = Math.round,
|
||||
size = [1, 1]; // width, height
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ function layout_treemap() {
|
|||
if (!node.children) return;
|
||||
var rect = {x: node.x, y: node.y, dx: node.dx, dy: node.dy},
|
||||
row = [],
|
||||
children = node.children.slice().sort(layout_treemapSort),
|
||||
children = node.children.slice().sort(d3_layout_treemapSort),
|
||||
child,
|
||||
best = Infinity, // the best row score so far
|
||||
score, // the current row score
|
||||
|
|
@ -166,16 +166,16 @@ function layout_treemap() {
|
|||
};
|
||||
|
||||
return treemap;
|
||||
}
|
||||
};
|
||||
|
||||
function layout_treemapChildren(d) {
|
||||
function d3_layout_treemapChildren(d) {
|
||||
return d.children;
|
||||
}
|
||||
|
||||
function layout_treemapValue(d) {
|
||||
function d3_layout_treemapValue(d) {
|
||||
return d.value;
|
||||
}
|
||||
|
||||
function layout_treemapSort(a, b) {
|
||||
function d3_layout_treemapSort(a, b) {
|
||||
return b.area - a.area;
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче