Modify target aspect ratio implementation.
This commit is contained in:
Родитель
32b02b6902
Коммит
92a0ea172c
12
d3.layout.js
12
d3.layout.js
|
@ -1496,12 +1496,14 @@ function d3_layout_treeAncestor(vim, node, ancestor) {
|
||||||
: ancestor;
|
: ancestor;
|
||||||
}
|
}
|
||||||
// Squarified Treemaps by Mark Bruls, Kees Huizing, and Jarke J. van Wijk
|
// Squarified Treemaps by Mark Bruls, Kees Huizing, and Jarke J. van Wijk
|
||||||
|
// Modified to support a target aspect ratio by Jeff Heer
|
||||||
d3.layout.treemap = function() {
|
d3.layout.treemap = function() {
|
||||||
var hierarchy = d3.layout.hierarchy(),
|
var hierarchy = d3.layout.hierarchy(),
|
||||||
round = Math.round,
|
round = Math.round,
|
||||||
size = [1, 1], // width, height
|
size = [1, 1], // width, height
|
||||||
sticky = false,
|
sticky = false,
|
||||||
stickies;
|
stickies,
|
||||||
|
ratio = 0.5 * (1 + Math.sqrt(5)); // golden ratio
|
||||||
|
|
||||||
// Recursively compute the node area based on value & scale.
|
// Recursively compute the node area based on value & scale.
|
||||||
function scale(node, k) {
|
function scale(node, k) {
|
||||||
|
@ -1582,7 +1584,7 @@ d3.layout.treemap = function() {
|
||||||
}
|
}
|
||||||
s *= s;
|
s *= s;
|
||||||
u *= u;
|
u *= u;
|
||||||
return Math.max((u * rmax) / s, s / (u * rmin));
|
return Math.max((u * rmax * ratio) / s, s / (u * rmin * ratio));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Positions the specified row of nodes. Modifies `rect`.
|
// Positions the specified row of nodes. Modifies `rect`.
|
||||||
|
@ -1659,6 +1661,12 @@ d3.layout.treemap = function() {
|
||||||
return treemap;
|
return treemap;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
treemap.ratio = function(x) {
|
||||||
|
if (!arguments.length) return ratio;
|
||||||
|
ratio = x;
|
||||||
|
return treemap;
|
||||||
|
};
|
||||||
|
|
||||||
return treemap;
|
return treemap;
|
||||||
};
|
};
|
||||||
})()
|
})()
|
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
@ -6,7 +6,8 @@ var treemap = d3.layout.treemap()
|
||||||
.size([w, h])
|
.size([w, h])
|
||||||
.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
|
.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
|
||||||
.value(function(d) { return d.value; })
|
.value(function(d) { return d.value; })
|
||||||
.sticky(true);
|
.sticky(true)
|
||||||
|
.ratio(+location.search.substring(1));
|
||||||
|
|
||||||
var div = d3.select("#chart").append("div")
|
var div = d3.select("#chart").append("div")
|
||||||
.style("position", "relative")
|
.style("position", "relative")
|
||||||
|
|
|
@ -6,7 +6,7 @@ d3.layout.treemap = function() {
|
||||||
size = [1, 1], // width, height
|
size = [1, 1], // width, height
|
||||||
sticky = false,
|
sticky = false,
|
||||||
stickies,
|
stickies,
|
||||||
target = 0.5 * (1 + Math.sqrt(5));
|
ratio = 0.5 * (1 + Math.sqrt(5)); // golden ratio
|
||||||
|
|
||||||
// Recursively compute the node area based on value & scale.
|
// Recursively compute the node area based on value & scale.
|
||||||
function scale(node, k) {
|
function scale(node, k) {
|
||||||
|
@ -87,9 +87,7 @@ d3.layout.treemap = function() {
|
||||||
}
|
}
|
||||||
s *= s;
|
s *= s;
|
||||||
u *= u;
|
u *= u;
|
||||||
r = Math.abs((u * rmax) / s - target);
|
return Math.max((u * rmax * ratio) / s, s / (u * rmin * ratio));
|
||||||
s = Math.abs(s / (u * rmin) - target);
|
|
||||||
return Math.max(r, s);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Positions the specified row of nodes. Modifies `rect`.
|
// Positions the specified row of nodes. Modifies `rect`.
|
||||||
|
@ -166,9 +164,9 @@ d3.layout.treemap = function() {
|
||||||
return treemap;
|
return treemap;
|
||||||
};
|
};
|
||||||
|
|
||||||
treemap.target = function(x) {
|
treemap.ratio = function(x) {
|
||||||
if (!arguments.length) return target;
|
if (!arguments.length) return ratio;
|
||||||
target = x;
|
ratio = x;
|
||||||
return treemap;
|
return treemap;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Загрузка…
Ссылка в новой задаче