Antoine : /* PLAN D'ETUDE INTERACTIF */

2017-07-13T13:47:14Z

‎PLAN D'ETUDE INTERACTIF

Antoine : Contenu remplacé par « == PLAN D'ETUDE INTERACTIF == Voir le Github du projet : https://github.com/antoine1000/erg-dendrogram »

2017-07-13T13:46:16Z

Contenu remplacé par « == PLAN D'ETUDE INTERACTIF == Voir le Github du projet : https://github.com/antoine1000/erg-dendrogram »

Voir les modifications

Antoine le 13 juillet 2017 à 12:20

2017-07-13T12:20:41Z

Antoine le 13 juillet 2017 à 12:18

2017-07-13T12:18:51Z

Antoine : Page créée avec « var margin = {top: 20, right: 120, bottom: 20, left: 120}; var width = 1000; var height = 700; var i = 0, duration = 750,... »

2017-07-13T12:16:11Z

Page créée avec « <syntaxhighlight lang="javascript" line> var margin = {top: 20, right: 120, bottom: 20, left: 120}; var width = 1000; var height = 700; var i = 0, duration = 750,... »

Nouvelle page

<syntaxhighlight lang="javascript" line>
var margin = {top: 20, right: 120, bottom: 20, left: 120};
var width = 1000;
var height = 700;

var i = 0,
duration = 750,
root;

var tree = d3.layout.tree()
.size([height, width]);
/*.size([360, width / 2 - 120]);*/

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Import lightbox
var lightbox;

d3.json("erg.json", function(error, flare) {
if (error) throw error;

root = flare;
root.x0 = height / 2;
root.y0 = 0;

function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}

root.children.forEach(collapse);
update(root);
});

d3.select(self.frameElement).style("height", "800px");

function update(source) {

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
/*.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; })*/
.on("click", click);

nodeEnter.append("circle")
.attr("r", 1e-6)
//open lightbox when a node has link and is clicked
.on("click", function (d) {
console.log('click! / this =', this, '/ d =', d);
//open lightbox
if(d.link){
d3.event.preventDefault();
lightbox = lity(d.link);
}
// d3
/*d3.selectAll("circle").filter(function (cd) {return cd == d.parent }).classed('active', true);*/
activate(this, d);
})

nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);

// Transition nodes to their new position.
node.classed("leaf", function(d) { return !d._children; });
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
.attr("r", 4.5);

nodeUpdate.select("text")
.style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();

nodeExit.select("circle")
.attr("r", 1e-6);

nodeExit.select("text")
.style("fill-opacity", 1e-6);

// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
/*.attr("d", function(d) {
return "M" + project(d.x, d.y)
+ "C" + project(d.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, d.parent.y);
});*/

// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}

// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}

function project(x, y) {
var angle = (x - 90) / 180 * Math.PI, radius = y;
return [radius * Math.cos(angle), radius * Math.sin(angle)];
}

function activate(elt, d, noclear) {
// Clear all active classes
if(noclear == undefined) {
d3.selectAll("circle.active").classed("active", false);
d3.selectAll("path.link").classed("active", false);
}
// Add active class to elements
d3.select(elt).classed("active", true);
console.log('need to activate', d.parent);

d3.selectAll("circle").each(function (cd) {
if(cd == d.parent){
activate(this, cd, true);
d3.select(this).classed('active', true);
}
// give "active" class to path between clicked node
d3.selectAll("path.link").each(function (cd){
if(cd.target == d){
d3.select(this).classed('active', true);
}
})
});
}

<syntaxhighlight>

← Version précédente		Version du 13 juillet 2017 à 13:47
Ligne 1 :		Ligne 1 :

−	== ~~PLAN D'ETUDE INTERACTIF~~ ==	+	== Github ==

−	~~Voir~~ le Github du projet : https://github.com/antoine1000/erg-dendrogram	+	Toutes les informations relatives au projet (code source / todo list) sont disponibles sur le Github du projet : https://github.com/antoine1000/erg-dendrogram

← Version précédente		Version du 13 juillet 2017 à 12:18
Ligne 196 :		Ligne 196 :
	}		}

−	<syntaxhighlight>	+	</syntaxhighlight>

@@ Ligne 1 : / Ligne 1 : @@
 <syntaxhighlight lang="javascript" line>
 var margin = {top: 20, right: 120, bottom: 20, left: 120};
 var width = 1000;

Plan d'étude interactif - Historique des versions

Antoine : /* PLAN D'ETUDE INTERACTIF */

Antoine : Contenu remplacé par « == PLAN D'ETUDE INTERACTIF == Voir le Github du projet : https://github.com/antoine1000/erg-dendrogram »

Antoine le 13 juillet 2017 à 12:20

Antoine le 13 juillet 2017 à 12:18

Antoine : Page créée avec « var margin = {top: 20, right: 120, bottom: 20, left: 120}; var width = 1000; var height = 700; var i = 0, duration = 750,... »