Clique sur une case ou un lien pour le mettre en valeur.
Dans notre cas cela permet de montrer le chemin de résolution qui à le plus de vote positif (nénmoins il faudrait un nombre minimum de votants par rapport aux nombre de participant.)
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Collapsible Tree Example</title> | |
<style> | |
.node rect { | |
fill: #fff; | |
stroke: #ccc; | |
stroke-width: 8px; | |
} | |
.node text { fill: white; font: 20px bold sans-serif; } | |
.link { | |
fill: none; | |
stroke: #ccc; | |
stroke-width: 8px; | |
} | |
</style> | |
<!-- load the d3.js library --> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
</head> | |
<body> | |
<script> | |
var treeData = [ | |
{ | |
"name": "Top Level", | |
"parent": "null", | |
"children": [ | |
{ | |
"name": "Level 2: A", | |
"parent": "Top Level", | |
"children": [ | |
{ | |
"name": "Son of A", | |
"parent": "Level 2: A" | |
}, | |
{ | |
"name": "Daughter of A", | |
"parent": "Level 2: A" | |
} | |
] | |
}, | |
{ | |
"name": "Level 2: A", | |
"parent": "Top Level", | |
"children": [ | |
{ | |
"name": "Son of A", | |
"parent": "Level 2: A" | |
}, | |
{ | |
"name": "Level 2: A", | |
"parent": "Top Level", | |
} | |
] | |
} | |
] | |
} | |
]; | |
// ************** Generate the tree diagram ***************** | |
var margin = {top: 100, right: 120, bottom: 20, left: 120}, | |
width = 1960 - margin.right - margin.left, | |
height = 1500 - margin.top - margin.bottom; | |
var i = 0; | |
var tree = d3.layout.tree() | |
.size([height, width]); | |
var diagonal = d3.svg.diagonal() | |
.projection(function(d) { return [d.x, d.y]; }); | |
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 + ")"); | |
root = treeData[0]; | |
update(root); | |
function update(source) { | |
// Compute the new tree layout. | |
var nodes = tree.nodes(source), | |
links = tree.links(nodes); | |
// Normalize for fixed-depth. | |
nodes.forEach(function(d) { | |
d.y = d.depth * 180; | |
}); | |
// Declare the nodes… | |
var node = svg.selectAll("g.node") | |
.data(nodes, function(d) { console.log(d.id); return d.id || (d.id = ++i); }); | |
// Enter the nodes. | |
var nodeEnter = node.enter().append("g") | |
.attr("class", "node") | |
.attr("transform", function(d) { | |
return "translate(" + d.x + "," + d.y + ")"; }); | |
nodeEnter.append("rect") | |
.attr("width", 80) | |
.attr("height", 80 ) | |
.attr('transform', 'translate('+ -40 + ','+ -40 + ')') | |
.style("fill", function (d) { | |
if (d.depth == 0) { | |
return "black"; | |
} | |
else if (d.depth % 2 == 0) | |
{ | |
return "#d62728"; | |
} | |
else | |
{ | |
return "#1f77b4"; | |
} | |
}); | |
nodeEnter.append("text") | |
.text(function (d) { | |
if (d.depth == 0) { | |
return "E"; | |
} | |
else if (d.depth % 2 == 1) | |
{ | |
return "M"; | |
} | |
else | |
{ | |
return "S"; | |
} | |
}); | |
// Declare the links… | |
var link = svg.selectAll("path.link") | |
.data(links, function(d) { return d.target.id; }); | |
// Enter the links. | |
link.enter().insert("path", "g") | |
.attr("class", "link") | |
.attr("d", diagonal); | |
//On click | |
d3.selectAll("path").on("click",function (d) { | |
d3.select(this).style('stroke', '#DAA520') | |
.style('stroke-width', '10'); | |
}); | |
d3.selectAll("rect").on("click",function () { | |
d3.select(this).style('stroke', '#DAA520') | |
.style('stroke-width', '10'); | |
}); | |
} | |
</script> | |
</body> | |
</html> |