Introduction à D3

D3.js

Sélection

La commande d3.select(<selecteur>) permet de pointer vers un élément du document. Cet élément est spécifié par le sélecteur, qui est le même que pour le CSS (i.e. balise, .classe ou #id). Voici un petit explicatif.

Création d'éléments

Echelle de couleurs (ou autres)

autre

<!doctype>
<html>
<head>
	<title>D3.js</title>
	<meta charset = "utf-8">
	<script src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
<h1>Autour de D3.js</h1>
<h2>Sélection</h2>
<div id = "A"></div>
<div>une autre div</div>
<script>
var maDivA = d3.select("#A");
console.log("maDivA", maDivA);
maDivA.text("Je viens de sélectionner cette div pour y mettre ce texte");
var tousDiv = d3.selectAll("div");
console.log("tousDiv", tousDiv);
tousDiv.style("background-color", "#ddd");
</script>
<hr>
<h2>Création d'éléments</h2>
<ol id = "B"></ol>
<ol id = "C"></ol>
<script>
var divB = d3.select("#B");
var tab = ["premier", "deuxième", "dernier"];
tab.forEach(function(d) {
		divB.append("li")
			.text(d);
	});
console.log("divB", divB);
var divC = d3.select("#C");
var liste = divC.selectAll("li")
	.data(tab)
	.enter()
	.append("li")
	.text(function(d) { return d; });
console.log("divC", divC);
console.log("liste", liste);
</script>
<hr>
<h2>Echelle de couleurs (ou autres)</h2>
<div id = "D"></div>
<script>
var res = d3.select("#D"),
	col = d3.scale.ordinal()
		.range(d3.scale.category10().range()),
	explain1 = res.append("div"),
	explain2 = res.append("div");
explain1.append("strong").text("Domaine de la fonction col() (au début) : ");
explain1.selectAll("span")
	.data(col.domain())
	.enter()
	.append("span")
	.text(function(d) {if (i > 0) return ', '+d; return d; });
console.log(col.domain());
for(var i = 0; i < 15; i++) { 
		res.append("div")
			.style("background-color", col(i))
			.style("color", "white")
			.style("display", "inline-block")
			.style("margin", "5px")
			.text(i + " : " + col(i));
	}
explain2.append("strong").text("Domaine de la fonction col() (à la fin) : ");
explain2.selectAll("span")
	.data(col.domain())
	.enter()
	.append("span")
	.text(function(d, i) { if (i > 0) return ', '+d; return d;});
console.log(col.range());
</script>
<hr>
<h2>autre</h2>
<div id = "E"></div>
<script>
var divE = d3.select("#E"),
	resPie = d3.layout.pie()([1, 2, 3, 4]),
	arcFunction = d3.svg.arc().outerRadius(200),
	resArc = resPie.map(function(p) { return arcFunction(p) });
divE.append("svg")
		.attr("width", 400)
		.attr("height", 400)
	.append("g")
		.attr("transform", "translate(" + 200 + "," + 200 + ")")
	.selectAll("path")
	.data(resArc)
	.enter()
	.append("path")
		.attr("d", function(d) {return d; })
		.style("fill", function(d, i) { return d3.scale.category10().range()[i]; });
console.log("resPie", resPie);
console.log("resArc", resArc);
</script>
<hr>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js