periplus: toolkit/javascript/d3/examples/bar/bar-hierarchy.html@79833eaa394a (annotated)

47 c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	1	<!DOCTYPE html>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	2	<html>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	3	<head>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	4	<title>Hierarchical Bar Chart</title>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	5	<script type="text/javascript" src="../../d3.js"></script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	6	<script type="text/javascript" src="../../d3.layout.js"></script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	7	<style type="text/css">
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	8
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	9	text {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	10	font: 10px sans-serif;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	11	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	12
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	13	rect.background {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	14	fill: white;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	15	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	16
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	17	.axis {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	18	shape-rendering: crispEdges;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	19	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	20
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	21	.axis path, .axis line {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	22	fill: none;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	23	stroke: #000;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	24	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	25
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	26	</style>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	27	</head>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	28	<body>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	29	<script type="text/javascript">
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	30
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	31	var m = [20, 20, 20, 120], // top right bottom left
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	32	w = 960 - m[1] - m[3], // width
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	33	h = 500 - m[0] - m[2], // height
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	34	x = d3.scale.linear().range([0, w]),
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	35	y = 20, // bar height
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	36	z = d3.scale.ordinal().range(["steelblue", "#ccc"]), // bar color
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	37	duration = 750,
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	38	delay = 25;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	39
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	40	var hierarchy = d3.layout.partition()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	41	.value(function(d) { return d.size; });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	42
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	43	var xAxis = d3.svg.axis()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	44	.scale(x)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	45	.orient("top");
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	46
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	47	var svg = d3.select("body").append("svg:svg")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	48	.attr("width", w + m[1] + m[3])
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	49	.attr("height", h + m[0] + m[2])
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	50	.append("svg:g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	51	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	52
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	53	svg.append("svg:rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	54	.attr("class", "background")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	55	.attr("width", w)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	56	.attr("height", h)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	57	.on("click", up);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	58
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	59	svg.append("svg:g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	60	.attr("class", "x axis");
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	61
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	62	svg.append("svg:g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	63	.attr("class", "y axis")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	64	.append("svg:line")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	65	.attr("y1", "100%");
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	66
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	67	d3.json("../data/flare.json", function(root) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	68	hierarchy.nodes(root);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	69	x.domain([0, root.value]).nice();
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	70	down(root, 0);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	71	});
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	72
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	73	function down(d, i) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	74	if (!d.children \|\| this.__transition__) return;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	75	var end = duration + d.children.length * delay;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	76
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	77	// Mark any currently-displayed bars as exiting.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	78	var exit = svg.selectAll(".enter").attr("class", "exit");
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	79
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	80	// Entering nodes immediately obscure the clicked-on bar, so hide it.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	81	exit.selectAll("rect").filter(function(p) { return p === d; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	82	.style("fill-opacity", 1e-6);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	83
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	84	// Enter the new bars for the clicked-on data.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	85	// Per above, entering bars are immediately visible.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	86	var enter = bar(d)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	87	.attr("transform", stack(i))
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	88	.style("opacity", 1);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	89
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	90	// Have the text fade-in, even though the bars are visible.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	91	// Color the bars as parents; they will fade to children if appropriate.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	92	enter.select("text").style("fill-opacity", 1e-6);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	93	enter.select("rect").style("fill", z(true));
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	94
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	95	// Update the x-scale domain.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	96	x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	97
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	98	// Update the x-axis.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	99	svg.selectAll(".x.axis").transition().duration(duration).call(xAxis);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	100
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	101	// Transition entering bars to their new position.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	102	var enterTransition = enter.transition()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	103	.duration(duration)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	104	.delay(function(d, i) { return i * delay; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	105	.attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	106
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	107	// Transition entering text.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	108	enterTransition.select("text").style("fill-opacity", 1);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	109
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	110	// Transition entering rects to the new x-scale.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	111	enterTransition.select("rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	112	.attr("width", function(d) { return x(d.value); })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	113	.style("fill", function(d) { return z(!!d.children); });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	114
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	115	// Transition exiting bars to fade out.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	116	var exitTransition = exit.transition()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	117	.duration(duration)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	118	.style("opacity", 1e-6)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	119	.remove();
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	120
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	121	// Transition exiting bars to the new x-scale.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	122	exitTransition.selectAll("rect").attr("width", function(d) { return x(d.value); });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	123
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	124	// Rebind the current node to the background.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	125	svg.select(".background").data([d]).transition().duration(end); d.index = i;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	126	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	127
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	128	function up(d) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	129	if (!d.parent \|\| this.__transition__) return;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	130	var end = duration + d.children.length * delay;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	131
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	132	// Mark any currently-displayed bars as exiting.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	133	var exit = svg.selectAll(".enter").attr("class", "exit");
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	134
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	135	// Enter the new bars for the clicked-on data's parent.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	136	var enter = bar(d.parent)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	137	.attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	138	.style("opacity", 1e-6);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	139
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	140	// Color the bars as appropriate.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	141	// Exiting nodes will obscure the parent bar, so hide it.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	142	enter.select("rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	143	.style("fill", function(d) { return z(!!d.children); })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	144	.filter(function(p) { return p === d; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	145	.style("fill-opacity", 1e-6);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	146
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	147	// Update the x-scale domain.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	148	x.domain([0, d3.max(d.parent.children, function(d) { return d.value; })]).nice();
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	149
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	150	// Update the x-axis.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	151	svg.selectAll(".x.axis").transition().duration(duration).call(xAxis);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	152
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	153	// Transition entering bars to fade in over the full duration.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	154	var enterTransition = enter.transition()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	155	.duration(end)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	156	.style("opacity", 1);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	157
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	158	// Transition entering rects to the new x-scale.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	159	// When the entering parent rect is done, make it visible!
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	160	enterTransition.select("rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	161	.attr("width", function(d) { return x(d.value); })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	162	.each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	163
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	164	// Transition exiting bars to the parent's position.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	165	var exitTransition = exit.selectAll("g").transition()
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	166	.duration(duration)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	167	.delay(function(d, i) { return i * delay; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	168	.attr("transform", stack(d.index));
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	169
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	170	// Transition exiting text to fade out.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	171	exitTransition.select("text")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	172	.style("fill-opacity", 1e-6);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	173
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	174	// Transition exiting rects to the new scale and fade to parent color.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	175	exitTransition.select("rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	176	.attr("width", function(d) { return x(d.value); })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	177	.style("fill", z(true));
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	178
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	179	// Remove exiting nodes when the last child has finished transitioning.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	180	exit.transition().duration(end).remove();
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	181
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	182	// Rebind the current parent to the background.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	183	svg.select(".background").data([d.parent]).transition().duration(end);;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	184	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	185
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	186	// Creates a set of bars for the given data node, at the specified index.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	187	function bar(d) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	188	var bar = svg.insert("svg:g", ".y.axis")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	189	.attr("class", "enter")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	190	.attr("transform", "translate(0,5)")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	191	.selectAll("g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	192	.data(d.children)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	193	.enter().append("svg:g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	194	.style("cursor", function(d) { return !d.children ? null : "pointer"; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	195	.on("click", down);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	196
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	197	bar.append("svg:text")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	198	.attr("x", -6)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	199	.attr("y", y / 2)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	200	.attr("dy", ".35em")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	201	.attr("text-anchor", "end")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	202	.text(function(d) { return d.name; });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	203
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	204	bar.append("svg:rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	205	.attr("width", function(d) { return x(d.value); })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	206	.attr("height", y);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	207
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	208	return bar;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	209	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	210
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	211	// A stateful closure for stacking bars horizontally.
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	212	function stack(i) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	213	var x0 = 0;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	214	return function(d) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	215	var tx = "translate(" + x0 + "," + y * i * 1.2 + ")";
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	216	x0 += x(d.value);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	217	return tx;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	218	};
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	219	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	220
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	221	</script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	222	</body>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	223	</html>

author	Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
	Fri, 18 Apr 2014 14:31:58 +0200
changeset 51	79833eaa394a
parent 47	c0b4a8b5a012
permissions	-rw-r--r--